<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/dev/semantics.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:36:25 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard, Edition for Web Developers</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  <script async="" src=search.js></script>
  
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   
   <hgroup><h1><a rel=home href=index.html>HTML: The Living Standard</a></h1><p id=dev-edition-h2>Edition for Web Developers — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   

   <div id=search>
    <input placeholder="Search. Press '/'" autocomplete=off name=query id=query type=search>
    <ol id=results></ol>
   </div>
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=dom.html>← 3 Semantics, structure, and APIs of HTML documents</a> — <a href=index.html>Table of Contents</a> — <a href=sections.html>4.3 Sections →</a></nav><ol class=toc><li><a href=semantics.html#semantics><span class=secno>4</span> The elements of HTML</a><ol><li><a href=semantics.html#the-root-element><span class=secno>4.1</span> The document element</a><ol><li><a href=semantics.html#the-html-element><span class=secno>4.1.1</span> The <code>html</code> element</a></ol><li><a href=semantics.html#document-metadata><span class=secno>4.2</span> Document metadata</a><ol><li><a href=semantics.html#the-head-element><span class=secno>4.2.1</span> The <code>head</code> element</a><li><a href=semantics.html#the-title-element><span class=secno>4.2.2</span> The <code>title</code> element</a><li><a href=semantics.html#the-base-element><span class=secno>4.2.3</span> The <code>base</code> element</a><li><a href=semantics.html#the-link-element><span class=secno>4.2.4</span> The <code>link</code> element</a><ol><li><a href=semantics.html#providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element><span class=secno>4.2.4.1</span> Providing users with a means to follow hyperlinks created using the <code>link</code>
  element</a></ol><li><a href=semantics.html#the-meta-element><span class=secno>4.2.5</span> The <code>meta</code>
  element</a><ol><li><a href=semantics.html#standard-metadata-names><span class=secno>4.2.5.1</span> Standard metadata names</a><li><a href=semantics.html#other-metadata-names><span class=secno>4.2.5.2</span> Other metadata names</a><li><a href=semantics.html#pragma-directives><span class=secno>4.2.5.3</span> Pragma directives</a><li><a href=semantics.html#charset><span class=secno>4.2.5.4</span> Specifying the document's character encoding</a></ol><li><a href=semantics.html#the-style-element><span class=secno>4.2.6</span> The <code>style</code> element</a></ol></ol></ol><h2 id=semantics><span class=secno>4</span> The elements of HTML<a href=#semantics class=self-link></a></h2>

  <h3 id=the-root-element><span class=secno>4.1</span> The document element<a href=#the-root-element class=self-link></a></h3>

  <h4 id=the-html-element><span class=secno>4.1.1</span> The <dfn data-dfn-type=element><code>html</code></dfn> element<a href=#the-html-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html title="The <html> HTML element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.">Element/html</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-html-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-html-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As document's <a id=the-html-element:document-element href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a>.<dd>Wherever a subdocument fragment is allowed in a compound document.<dt><a href=dom.html#concept-element-content-model id=the-html-element:concept-element-content-model>Content model</a>:<dd>A <code id=the-html-element:the-head-element><a href=#the-head-element>head</a></code> element followed by a <code id=the-html-element:the-body-element><a href=sections.html#the-body-element>body</a></code> element.<dt><a href=dom.html#concept-element-tag-omission id=the-html-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>An <code id=the-html-element:the-html-element><a href=#the-html-element>html</a></code> element's <a href=syntax.html#syntax-start-tag id=the-html-element:syntax-start-tag>start tag</a> can be omitted
  if the first thing inside the <code id=the-html-element:the-html-element-2><a href=#the-html-element>html</a></code> element is not a <a href=syntax.html#syntax-comments id=the-html-element:syntax-comments>comment</a>.<dd>An <code id=the-html-element:the-html-element-3><a href=#the-html-element>html</a></code> element's <a href=syntax.html#syntax-end-tag id=the-html-element:syntax-end-tag>end tag</a> can be omitted if
  the <code id=the-html-element:the-html-element-4><a href=#the-html-element>html</a></code> element is not immediately followed by a <a href=syntax.html#syntax-comments id=the-html-element:syntax-comments-2>comment</a>.<dt><a href=dom.html#concept-element-attributes id=the-html-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-html-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-html-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-html>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-html>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-html-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLHtmlElement</code>.</dl>

  <p>The <code id=the-html-element:the-html-element-5><a href=#the-html-element>html</a></code> element <a id=the-html-element:represents href=dom.html#represents>represents</a> the root of an HTML document.</p>

  <p>Authors are encouraged to specify a <code id=the-html-element:attr-lang><a href=dom.html#attr-lang>lang</a></code> attribute on the root
  <code id=the-html-element:the-html-element-6><a href=#the-html-element>html</a></code> element, giving the document's language. This aids speech synthesis tools to
  determine what pronunciations to use, translation tools to determine what rules to use, and so
  forth.</p>

  <div class=example>

   <p>The <code id=the-html-element:the-html-element-7><a href=#the-html-element>html</a></code> element in the following example declares that the document's language
   is English.</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE html&gt;</c->
<strong><c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c-></strong>
<c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Swapping Songs<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Swapping Songs<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Tonight I swapped some of the songs I wrote with some friends, who
gave me some of the songs they wrote. I love sharing my music.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<strong><c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></strong></code></pre>

  </div>




  <h3 id=document-metadata><span class=secno>4.2</span> Document metadata<a href=#document-metadata class=self-link></a></h3>

  <h4 id=the-head-element><span class=secno>4.2.1</span> The <dfn data-dfn-type=element><code>head</code></dfn> element<a href=#the-head-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head title="The <head> HTML element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.">Element/head</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-head-element:concept-element-categories>Categories</a>:<dd>None.<dt><a href=dom.html#concept-element-contexts id=the-head-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>As the first element in an <code id=the-head-element:the-html-element><a href=#the-html-element>html</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-head-element:concept-element-content-model>Content model</a>:<dd>If the document is <a id=the-head-element:an-iframe-srcdoc-document href=iframe-embed-object.html#an-iframe-srcdoc-document>an <code>iframe</code> <code>srcdoc</code> document</a> or if title information is available from a higher-level protocol: Zero or more elements of <a id=the-head-element:metadata-content-2 href=dom.html#metadata-content-2>metadata content</a>, of which no more than one is a <code id=the-head-element:the-title-element><a href=#the-title-element>title</a></code> element and no more than one is a <code id=the-head-element:the-base-element><a href=#the-base-element>base</a></code> element.<dd>Otherwise: One or more elements of <a id=the-head-element:metadata-content-2-2 href=dom.html#metadata-content-2>metadata content</a>, of which exactly one is a <code id=the-head-element:the-title-element-2><a href=#the-title-element>title</a></code> element and no more than one is a <code id=the-head-element:the-base-element-2><a href=#the-base-element>base</a></code> element.<dt><a href=dom.html#concept-element-tag-omission id=the-head-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>A <code id=the-head-element:the-head-element><a href=#the-head-element>head</a></code> element's <a href=syntax.html#syntax-start-tag id=the-head-element:syntax-start-tag>start tag</a> can be omitted if
  the element is empty, or if the first thing inside the <code id=the-head-element:the-head-element-2><a href=#the-head-element>head</a></code> element is an
  element.<dd>A <code id=the-head-element:the-head-element-3><a href=#the-head-element>head</a></code> element's <a href=syntax.html#syntax-end-tag id=the-head-element:syntax-end-tag>end tag</a> can be omitted if
  the <code id=the-head-element:the-head-element-4><a href=#the-head-element>head</a></code> element is not immediately followed by <a id=the-head-element:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a> or a
  <a href=syntax.html#syntax-comments id=the-head-element:syntax-comments>comment</a>.<dt><a href=dom.html#concept-element-attributes id=the-head-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-head-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-head-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-head>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-head>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-head-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLHeadElement</code>.</dl>

  <p>The <code id=the-head-element:the-head-element-5><a href=#the-head-element>head</a></code> element <a id=the-head-element:represents href=dom.html#represents>represents</a> a collection of metadata for the
  <code>Document</code>.</p>

  <div class=example>

   <p>The collection of metadata in a <code id=the-head-element:the-head-element-6><a href=#the-head-element>head</a></code> element can be large or small. Here is an
   example of a very short one:</p>

   <pre><code class='html'><c- cp>&lt;!doctype html&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>en</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->A document with a short head<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
 ...</code></pre>

   <p>Here is an example of a longer one:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>HTML</c-> <c- e>LANG</c-><c- o>=</c-><c- s>&quot;EN&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>HEAD</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>META</c-> <c- e>CHARSET</c-><c- o>=</c-><c- s>&quot;UTF-8&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>BASE</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;https://www.example.com/&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>TITLE</c-><c- p>&gt;</c->An application with a long head<c- p>&lt;/</c-><c- f>TITLE</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>LINK</c-> <c- e>REL</c-><c- o>=</c-><c- s>&quot;STYLESHEET&quot;</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;default.css&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>LINK</c-> <c- e>REL</c-><c- o>=</c-><c- s>&quot;STYLESHEET ALTERNATE&quot;</c-> <c- e>HREF</c-><c- o>=</c-><c- s>&quot;big.css&quot;</c-> <c- e>TITLE</c-><c- o>=</c-><c- s>&quot;Big Text&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>SCRIPT</c-> <c- e>SRC</c-><c- o>=</c-><c- s>&quot;support.js&quot;</c-><c- p>&gt;&lt;/</c-><c- f>SCRIPT</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>META</c-> <c- e>NAME</c-><c- o>=</c-><c- s>&quot;APPLICATION-NAME&quot;</c-> <c- e>CONTENT</c-><c- o>=</c-><c- s>&quot;Long headed application&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>HEAD</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>BODY</c-><c- p>&gt;</c->
 ...</code></pre>

  </div>

  <p class=note>The <code id=the-head-element:the-title-element-3><a href=#the-title-element>title</a></code> element is a required child in most situations, but when a
  higher-level protocol provides title information, e.g., in the subject line of an email when HTML
  is used as an email authoring format, the <code id=the-head-element:the-title-element-4><a href=#the-title-element>title</a></code> element can be omitted.</p>



  <h4 id=the-title-element><span class=secno>4.2.2</span> The <dfn data-dfn-type=element><code>title</code></dfn> element<a href=#the-title-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title title="The <title> HTML element defines the document's title that is shown in a browser's title bar or a page's tab. It only contains text; tags within the element are ignored.">Element/title</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>1+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-title-element:concept-element-categories>Categories</a>:<dd><a id=the-title-element:metadata-content-2 href=dom.html#metadata-content-2>Metadata content</a>.<dt><a href=dom.html#concept-element-contexts id=the-title-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>In a <code id=the-title-element:the-head-element><a href=#the-head-element>head</a></code> element containing no other <code id=the-title-element:the-title-element><a href=#the-title-element>title</a></code> elements.<dt><a href=dom.html#concept-element-content-model id=the-title-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#text-content id=the-title-element:text-content>Text</a> that is not <a id=the-title-element:inter-element-whitespace href=dom.html#inter-element-whitespace>inter-element whitespace</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-title-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-title-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-title-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-title-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-title>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-title>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-title-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLTitleElement</code>.</dl>

  <p>The <code id=the-title-element:the-title-element-2><a href=#the-title-element>title</a></code> element <a id=the-title-element:represents href=dom.html#represents>represents</a> the document's title or name. Authors
  should use titles that identify their documents even when they are used out of context, for
  example in a user's history or bookmarks, or in search results. The document's title is often
  different from its first heading, since the first heading does not have to stand alone when taken
  out of context.</p>

  <p>There must be no more than one <code id=the-title-element:the-title-element-3><a href=#the-title-element>title</a></code> element per document.</p>

  <p class=note>If it's reasonable for the <code>Document</code> to have no title, then the
  <code id=the-title-element:the-title-element-4><a href=#the-title-element>title</a></code> element is probably not required. See the <code id=the-title-element:the-head-element-2><a href=#the-head-element>head</a></code> element's content
  model for a description of when the element is required.</p>

  <dl class=domintro><dt><code><var>title</var>.<span id=dom-title-text>text</span> [ = <var>value</var> ]</code><dd>
    <p>Returns the <a id=the-title-element:child-text-content href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a> of the element.</p>

    <p>Can be set, to replace the element's children with the given value.</p>
   </dl>

  

  <div class=example>

   <p>Here are some examples of appropriate titles, contrasted with the top-level headings that
   might be used on those same pages.</p>

   <pre><code class='html'>  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Introduction to The Mating Rituals of Bees<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
    ...
  <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->Introduction<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->This companion guide to the highly successful
  <c- p>&lt;</c-><c- f>cite</c-><c- p>&gt;</c->Introduction to Medieval Bee-Keeping<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c-> book is...</code></pre>

   <p>The next page might be a part of the same site. Note how the title describes the subject
   matter unambiguously, while the first heading assumes the reader knows what the context is and
   therefore won't wonder if the dances are Salsa or Waltz:</p>

   <pre><code class='html'>  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Dances used during bee mating rituals<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
    ...
  <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->The Dances<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p>The string to use as the document's title is given by the <code id=the-title-element:dom-document-title><a href=dom.html#dom-document-title>document.title</a></code> IDL attribute.</p>

  


  <h4 id=the-base-element><span class=secno>4.2.3</span> The <dfn data-dfn-type=element><code>base</code></dfn> element<a href=#the-base-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base title="The <base> HTML element specifies the base URL to use for all relative URLs in a document. There can be only one <base> element in a document.">Element/base</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-base-element:concept-element-categories>Categories</a>:<dd><a id=the-base-element:metadata-content-2 href=dom.html#metadata-content-2>Metadata content</a>.<dt><a href=dom.html#concept-element-contexts id=the-base-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>In a <code id=the-base-element:the-head-element><a href=#the-head-element>head</a></code> element containing no other <code id=the-base-element:the-base-element><a href=#the-base-element>base</a></code> elements.<dt><a href=dom.html#concept-element-content-model id=the-base-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-base-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-base-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-base-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-base-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-base-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-base-element:attr-base-href><a href=#attr-base-href>href</a></code> —  <span>Document base URL</span>
     <dd><code id=the-base-element:attr-base-target><a href=#attr-base-target>target</a></code> —  Default <a id=the-base-element:navigable href=document-sequences.html#navigable>navigable</a> for <a id=the-base-element:hyperlink href=links.html#hyperlink>hyperlink</a> <a href=browsing-the-web.html#navigate id=the-base-element:navigate>navigation</a> and <a id=the-base-element:form-submission-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-base-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-base>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-base>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-base-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLBaseElement</code>.</dl>

  <p>The <code id=the-base-element:the-base-element-2><a href=#the-base-element>base</a></code> element allows authors to specify the <span>document base URL</span> for
  the purposes of parsing <a href=https://url.spec.whatwg.org/#concept-url id=the-base-element:url data-x-internal=url>URLs</a>, and the name of the default
  <a id=the-base-element:navigable-2 href=document-sequences.html#navigable>navigable</a> for the purposes of <span>following hyperlinks</span>. The element does not
  <a href=dom.html#represents id=the-base-element:represents>represent</a> any content beyond this information.</p>

  <p>There must be no more than one <code id=the-base-element:the-base-element-3><a href=#the-base-element>base</a></code> element per document.</p>

  <p>A <code id=the-base-element:the-base-element-4><a href=#the-base-element>base</a></code> element must have either an <code id=the-base-element:attr-base-href-2><a href=#attr-base-href>href</a></code>
  attribute, a <code id=the-base-element:attr-base-target-2><a href=#attr-base-target>target</a></code> attribute, or both.</p>

  <p>The <dfn data-dfn-for=base id=attr-base-href data-dfn-type=element-attr><code>href</code></dfn> content
  attribute, if specified, must contain a <a id=the-base-element:valid-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-url-potentially-surrounded-by-spaces>valid URL potentially surrounded by
  spaces</a>.</p>

  <p>A <code id=the-base-element:the-base-element-5><a href=#the-base-element>base</a></code> element, if it has an <code id=the-base-element:attr-base-href-3><a href=#attr-base-href>href</a></code> attribute,
  must come before any other elements in the tree that have attributes defined as taking <a href=https://url.spec.whatwg.org/#concept-url id=the-base-element:url-2 data-x-internal=url>URLs</a>.</p>

  

  <p>The <dfn data-dfn-for=base id=attr-base-target data-dfn-type=element-attr><code>target</code></dfn> attribute,
  if specified, must contain a <a id=the-base-element:valid-navigable-target-name-or-keyword href=document-sequences.html#valid-navigable-target-name-or-keyword>valid navigable target name or keyword</a>, which specifies
  which <a id=the-base-element:navigable-3 href=document-sequences.html#navigable>navigable</a> is to be used as the default when <a href=links.html#hyperlink id=the-base-element:hyperlink-2>hyperlinks</a> and <a href=forms.html#the-form-element id=the-base-element:the-form-element>forms</a> in the
  <code>Document</code> cause <a href=browsing-the-web.html#navigate id=the-base-element:navigate-2>navigation</a>.</p>

  <p>A <code id=the-base-element:the-base-element-6><a href=#the-base-element>base</a></code> element, if it has a <code id=the-base-element:attr-base-target-3><a href=#attr-base-target>target</a></code>
  attribute, must come before any elements in the tree that represent <a href=links.html#hyperlink id=the-base-element:hyperlink-3>hyperlinks</a>.</p>

  

  <div class=example>

   <p>In this example, a <code id=the-base-element:the-base-element-7><a href=#the-base-element>base</a></code> element is used to set the <span>document base
   URL</span>:</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE html&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
        <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->This is an example for the <c- ni>&amp;lt;</c->base<c- ni>&amp;gt;</c-> element<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
        <c- p>&lt;</c-><c- f>base</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;https://www.example.com/news/index.html&quot;</c-><c- p>&gt;</c->
    <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
    <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
        <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Visit the <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;archives.html&quot;</c-><c- p>&gt;</c->archives<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
    <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

   <p>The link in the above example would be a link to "<code>https://www.example.com/news/archives.html</code>".</p>

  </div>




  <h4 id=the-link-element><span class=secno>4.2.4</span> The <dfn data-dfn-type=element><code>link</code></dfn> element<a href=#the-link-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link title="The <link> HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both &quot;favicon&quot; style icons and icons for the home screen and apps on mobile devices) among other things.">Element/link</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-link-element:concept-element-categories>Categories</a>:<dd><a id=the-link-element:metadata-content-2 href=dom.html#metadata-content-2>Metadata content</a>.<dd>If the element is <a href=#allowed-in-the-body id=the-link-element:allowed-in-the-body>allowed in the body</a>: <a id=the-link-element:flow-content-2 href=dom.html#flow-content-2>flow content</a>.<dd>If the element is <a href=#allowed-in-the-body id=the-link-element:allowed-in-the-body-2>allowed in the body</a>: <a id=the-link-element:phrasing-content-2 href=dom.html#phrasing-content-2>phrasing content</a>.<dt><a href=dom.html#concept-element-contexts id=the-link-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-link-element:metadata-content-2-2 href=dom.html#metadata-content-2>metadata content</a> is expected.<dd>In a <code id=the-link-element:the-noscript-element><a href=scripting.html#the-noscript-element>noscript</a></code> element that is a child of a <code id=the-link-element:the-head-element><a href=#the-head-element>head</a></code> element.<dd>If the element is <a href=#allowed-in-the-body id=the-link-element:allowed-in-the-body-3>allowed in the body</a>: where <a id=the-link-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-link-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-link-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-link-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-link-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-link-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-link-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-link-element:attr-link-href><a href=#attr-link-href>href</a></code> —  Address of the <a id=the-link-element:hyperlink href=links.html#hyperlink>hyperlink</a>
     <dd><code id=the-link-element:attr-link-crossorigin><a href=#attr-link-crossorigin>crossorigin</a></code> —  How the element handles crossorigin requests
     <dd><code id=the-link-element:attr-link-rel><a href=#attr-link-rel>rel</a></code> —  Relationship between the document containing the <a id=the-link-element:hyperlink-2 href=links.html#hyperlink>hyperlink</a> and the destination resource
     <dd><code id=the-link-element:attr-link-media><a href=#attr-link-media>media</a></code> —  Applicable media
     <dd><code id=the-link-element:attr-link-integrity><a href=#attr-link-integrity>integrity</a></code> —  Integrity metadata used in <cite>Subresource Integrity</cite> checks <a href=references.html#refsSRI>[SRI]</a>
     <dd><code id=the-link-element:attr-link-hreflang><a href=#attr-link-hreflang>hreflang</a></code> —  Language of the linked resource
     <dd><code id=the-link-element:attr-link-type><a href=#attr-link-type>type</a></code> —  Hint for the type of the referenced resource
     <dd><code id=the-link-element:attr-link-referrerpolicy><a href=#attr-link-referrerpolicy>referrerpolicy</a></code> —  <a id=the-link-element:referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>Referrer policy</a> for <a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-link-element:concept-fetch data-x-internal=concept-fetch>fetches</a> initiated by the element
     <dd><code id=the-link-element:attr-link-sizes><a href=#attr-link-sizes>sizes</a></code> —  Sizes of the icons (for <code id=the-link-element:attr-link-rel-2><a href=#attr-link-rel>rel</a></code>="<code id=the-link-element:rel-icon><a href=links.html#rel-icon>icon</a></code>")
     <dd><code id=the-link-element:attr-link-imagesrcset><a href=#attr-link-imagesrcset>imagesrcset</a></code> —  Images to use in different situations, e.g., high-resolution displays, small monitors, etc. (for <code id=the-link-element:attr-link-rel-3><a href=#attr-link-rel>rel</a></code>="<code id=the-link-element:link-type-preload><a href=links.html#link-type-preload>preload</a></code>")
     <dd><code id=the-link-element:attr-link-imagesizes><a href=#attr-link-imagesizes>imagesizes</a></code> —  Image sizes for different page layouts (for <code id=the-link-element:attr-link-rel-4><a href=#attr-link-rel>rel</a></code>="<code id=the-link-element:link-type-preload-2><a href=links.html#link-type-preload>preload</a></code>")
     <dd><code id=the-link-element:attr-link-as><a href=#attr-link-as>as</a></code> —  <a href=https://fetch.spec.whatwg.org/#concept-potential-destination id=the-link-element:concept-potential-destination data-x-internal=concept-potential-destination>Potential destination</a> for a preload request (for <code id=the-link-element:attr-link-rel-5><a href=#attr-link-rel>rel</a></code>="<code id=the-link-element:link-type-preload-3><a href=links.html#link-type-preload>preload</a></code>" and <code id=the-link-element:attr-link-rel-6><a href=#attr-link-rel>rel</a></code>="<code id=the-link-element:link-type-modulepreload><a href=links.html#link-type-modulepreload>modulepreload</a></code>")
     <dd><code id=the-link-element:attr-link-blocking><a href=#attr-link-blocking>blocking</a></code> —  Whether the element is <a id=the-link-element:potentially-render-blocking href=urls-and-fetching.html#potentially-render-blocking>potentially render-blocking</a>
     <dd><code id=the-link-element:attr-link-color><a href=#attr-link-color>color</a></code> —  Color to use when customizing a site's icon (for <code id=the-link-element:attr-link-rel-7><a href=#attr-link-rel>rel</a></code>="<code>mask-icon</code>")
     <dd><code id=the-link-element:attr-link-disabled><a href=#attr-link-disabled>disabled</a></code> —  Whether the link is disabled
     <dd><code id=the-link-element:attr-link-fetchpriority><a href=#attr-link-fetchpriority>fetchpriority</a></code> —  Sets the <a href=https://fetch.spec.whatwg.org/#request-priority id=the-link-element:concept-request-priority data-x-internal=concept-request-priority>priority</a> for <a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-link-element:concept-fetch-2 data-x-internal=concept-fetch>fetches</a> initiated by the element
     <dd>Also, the <code id=the-link-element:attr-link-title><a href=#attr-link-title>title</a></code> attribute <a href=#attr-link-title id=the-link-element:attr-link-title-2>has special semantics</a> on this element:  Title of the link;  <a id=the-link-element:css-style-sheet-set-name href=https://drafts.csswg.org/cssom/#css-style-sheet-set-name data-x-internal=css-style-sheet-set-name>CSS style sheet set name</a>
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-link-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-link>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-link>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-link-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLLinkElement</code>.</dl>

  <p>The <code id=the-link-element:the-link-element><a href=#the-link-element>link</a></code> element allows authors to link their document to other resources.</p>

  <p>The address of the link(s) is given by the <dfn data-dfn-for=link id=attr-link-href data-dfn-type=element-attr><code>href</code></dfn> attribute. If the <code id=the-link-element:attr-link-href-2><a href=#attr-link-href>href</a></code> attribute is present, then its value must be a <a id=the-link-element:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid
  non-empty URL potentially surrounded by spaces</a>. One or both of the <code id=the-link-element:attr-link-href-3><a href=#attr-link-href>href</a></code> or <code id=the-link-element:attr-link-imagesrcset-2><a href=#attr-link-imagesrcset>imagesrcset</a></code>
  attributes must be present.</p>

  

  <p>The types of link indicated (the relationships) are given by the value of the <dfn data-dfn-for=link id=attr-link-rel data-dfn-type=element-attr><code>rel</code></dfn> attribute, which, if present, must have a
  value that is a <a id=the-link-element:unordered-set-of-unique-space-separated-tokens href=common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens>unordered set of unique space-separated tokens</a>. The <a href=links.html#linkTypes>allowed keywords and their meanings</a> are defined in a later section. </p>

  

  <p>A <code id=the-link-element:the-link-element-2><a href=#the-link-element>link</a></code> element must have either a <code id=the-link-element:attr-link-rel-8><a href=#attr-link-rel>rel</a></code>
  attribute or an <code id=the-link-element:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute, but not both.</p>

  <p>If a <code id=the-link-element:the-link-element-3><a href=#the-link-element>link</a></code> element has an <code id=the-link-element:names:-the-itemprop-attribute-2><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute,
  or has a <code id=the-link-element:attr-link-rel-9><a href=#attr-link-rel>rel</a></code> attribute that contains only keywords that are
  <a id=the-link-element:body-ok href=links.html#body-ok>body-ok</a>, then the element is said to be <dfn id=allowed-in-the-body>allowed in the body</dfn>. This means
  that the element can be used where <a id=the-link-element:phrasing-content-2-3 href=dom.html#phrasing-content-2>phrasing content</a> is expected.</p>

  <p class=note>If the <code id=the-link-element:attr-link-rel-10><a href=#attr-link-rel>rel</a></code> attribute is used, the element can
  only sometimes be used in the <code id=the-link-element:the-body-element><a href=sections.html#the-body-element>body</a></code> of the page. When used with the <code id=the-link-element:names:-the-itemprop-attribute-3><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute, the element can be used both in the
  <code id=the-link-element:the-head-element-2><a href=#the-head-element>head</a></code> element and in the <code id=the-link-element:the-body-element-2><a href=sections.html#the-body-element>body</a></code> of the page, subject to the constraints of
  the microdata model.</p>

  <hr>

  <p>Two categories of links can be created using the <code id=the-link-element:the-link-element-4><a href=#the-link-element>link</a></code> element: <a href=links.html#external-resource-link id=the-link-element:external-resource-link>links to external resources</a> and <a href=links.html#hyperlink id=the-link-element:hyperlink-3>hyperlinks</a>. The <a href=links.html#linkTypes>link types section</a> defines
  whether a particular link type is an external resource or a hyperlink. One <code id=the-link-element:the-link-element-5><a href=#the-link-element>link</a></code>
  element can create multiple links (of which some might be <a href=links.html#external-resource-link id=the-link-element:external-resource-link-2>external resource links</a> and some might be <a href=links.html#hyperlink id=the-link-element:hyperlink-4>hyperlinks</a>); exactly which and how many links are created depends on the
  keywords given in the <code id=the-link-element:attr-link-rel-11><a href=#attr-link-rel>rel</a></code> attribute. User agents must process
  the links on a per-link basis, not a per-element basis.</p>

  <p class=note>Each link created for a <code id=the-link-element:the-link-element-6><a href=#the-link-element>link</a></code> element is handled separately. For
  instance, if there are two <code id=the-link-element:the-link-element-7><a href=#the-link-element>link</a></code> elements with <code>rel="stylesheet"</code>,
  they each count as a separate external resource, and each is affected by its own attributes
  independently. Similarly, if a single <code id=the-link-element:the-link-element-8><a href=#the-link-element>link</a></code> element has a <code id=the-link-element:attr-link-rel-12><a href=#attr-link-rel>rel</a></code> attribute with the value <code>next stylesheet</code>,
  it creates both a <a id=the-link-element:hyperlink-5 href=links.html#hyperlink>hyperlink</a> (for the <code id=the-link-element:link-type-next><a href=links.html#link-type-next>next</a></code> keyword) and
  an <a id=the-link-element:external-resource-link-3 href=links.html#external-resource-link>external resource link</a> (for the <code id=the-link-element:link-type-stylesheet><a href=links.html#link-type-stylesheet>stylesheet</a></code>
  keyword), and they are affected by other attributes (such as <code id=the-link-element:attr-link-media-2><a href=#attr-link-media>media</a></code> or <code id=the-link-element:attr-link-title-3><a href=#attr-link-title>title</a></code>)
  differently.</p>

  <div class=example>
   <p>For example, the following <code id=the-link-element:the-link-element-9><a href=#the-link-element>link</a></code> element creates two <a href=links.html#hyperlink id=the-link-element:hyperlink-6>hyperlinks</a> (to the same page):</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;author license&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/about&quot;</c-><c- p>&gt;</c-></code></pre>

   <p>The two links created by this element are one whose semantic is that the target page has
   information about the current page's author, and one whose semantic is that the target page has
   information regarding the license under which the current page is provided.</p>
  </div>

  <p><a href=links.html#hyperlink id=the-link-element:hyperlink-7>Hyperlinks</a> created with the <code id=the-link-element:the-link-element-10><a href=#the-link-element>link</a></code> element and its
  <code id=the-link-element:attr-link-rel-13><a href=#attr-link-rel>rel</a></code> attribute apply to the whole document. This contrasts with
  the <code id=the-link-element:attr-hyperlink-rel><a href=links.html#attr-hyperlink-rel>rel</a></code> attribute of <code id=the-link-element:the-a-element><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=the-link-element:the-area-element><a href=image-maps.html#the-area-element>area</a></code>
  elements, which indicates the type of a link whose context is given by the link's location within
  the document.</p>

  <p>Unlike those created by <code id=the-link-element:the-a-element-2><a href=text-level-semantics.html#the-a-element>a</a></code> and <code id=the-link-element:the-area-element-2><a href=image-maps.html#the-area-element>area</a></code> elements, <a href=links.html#hyperlink id=the-link-element:hyperlink-8>hyperlinks</a> created by <code id=the-link-element:the-link-element-11><a href=#the-link-element>link</a></code> elements are not displayed as
  part of the document by default, in user agents that <a href=#renderingUA>support the suggested
  default rendering</a>. And even if they are force-displayed using CSS, they have no
  <a id=the-link-element:activation-behaviour href=https://dom.spec.whatwg.org/#eventtarget-activation-behavior data-x-internal=activation-behaviour>activation behavior</a>. Instead, they primarily provide semantic information which might
  be used by the page or by other software that consumes the page's contents. Additionally, the user
  agent can <a href=#providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element>provide
  its own UI for following such hyperlinks</a>.</p>

  <p>The exact behavior for <a href=links.html#external-resource-link id=the-link-element:external-resource-link-4>links to external resources</a>
  depends on the exact relationship, as defined for the relevant <a href=links.html#linkTypes>link
  type</a>.</p>

  <hr>

  <p>The <dfn data-dfn-for=link id=attr-link-crossorigin data-dfn-type=element-attr><code>crossorigin</code></dfn>
  attribute is a <a id=the-link-element:cors-settings-attribute href=urls-and-fetching.html#cors-settings-attribute>CORS settings attribute</a>. It is intended for use with <a href=links.html#external-resource-link id=the-link-element:external-resource-link-5>external resource links</a>.</p>

  <p>The <dfn data-dfn-for=link id=attr-link-media data-dfn-type=element-attr><code>media</code></dfn> attribute
  says which media the resource applies to. The value must be a <a id=the-link-element:valid-media-query-list href=common-microsyntaxes.html#valid-media-query-list>valid media query
  list</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity title="Subresource Integrity (SRI) is a security feature that enables browsers to verify that resources they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched resource must match.">Subresource_Integrity</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>43+</span></span><span class="safari yes"><span>Safari</span><span>11.1+</span></span><span class="chrome yes"><span>Chrome</span><span>45+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>17+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=link id=attr-link-integrity data-dfn-type=element-attr><code>integrity</code></dfn>
  attribute represents the <a href=https://fetch.spec.whatwg.org/#concept-request-integrity-metadata id=the-link-element:concept-request-integrity-metadata data-x-internal=concept-request-integrity-metadata>integrity
  metadata</a> for requests which this element is responsible for. The value is text. The
  attribute must only be specified on <code id=the-link-element:the-link-element-12><a href=#the-link-element>link</a></code> elements that have a <code id=the-link-element:attr-link-rel-14><a href=#attr-link-rel>rel</a></code> attribute that contains the <code id=the-link-element:link-type-stylesheet-2><a href=links.html#link-type-stylesheet>stylesheet</a></code>, <code id=the-link-element:link-type-preload-4><a href=links.html#link-type-preload>preload</a></code>, or <code id=the-link-element:link-type-modulepreload-2><a href=links.html#link-type-modulepreload>modulepreload</a></code> keyword. <a href=references.html#refsSRI>[SRI]</a></p>

  <p>The <dfn data-dfn-for=link id=attr-link-hreflang data-dfn-type=element-attr><code>hreflang</code></dfn>
  attribute on the <code id=the-link-element:the-link-element-13><a href=#the-link-element>link</a></code> element has the same semantics as the <a href=links.html#attr-hyperlink-hreflang id=the-link-element:attr-hyperlink-hreflang><code>hreflang</code> attribute on the <code>a</code>
  element</a>.</p>

  <p>The <dfn data-dfn-for=link id=attr-link-type data-dfn-type=element-attr><code>type</code></dfn> attribute
  gives the <a id=the-link-element:mime-type href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a> of the linked resource. It is purely advisory. The value must be
  a <a id=the-link-element:valid-mime-type-string href=https://mimesniff.spec.whatwg.org/#valid-mime-type data-x-internal=valid-mime-type-string>valid MIME type string</a>.</p>

  <p>For <a href=links.html#external-resource-link id=the-link-element:external-resource-link-6>external resource links</a>, the <code id=the-link-element:attr-link-type-2><a href=#attr-link-type>type</a></code> attribute is used as a hint to user agents so that they can
  avoid fetching resources they do not support.</p>

  <p>The <dfn data-dfn-for=link id=attr-link-referrerpolicy data-dfn-type=element-attr><code>referrerpolicy</code></dfn> attribute is a <a id=the-link-element:referrer-policy-attribute href=urls-and-fetching.html#referrer-policy-attribute>referrer policy
  attribute</a>. It is intended for use with <a href=links.html#external-resource-link id=the-link-element:external-resource-link-7>external
  resource links</a>, where it helps set the <a id=the-link-element:referrer-policy-2 href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer policy</a> used when <span>fetching and processing the linked resource</span>.
  <a href=references.html#refsREFERRERPOLICY>[REFERRERPOLICY]</a></p>

  <p>The <dfn data-dfn-for=link id=attr-link-title data-dfn-type=element-attr><code>title</code></dfn> attribute
  gives the title of the link. With one exception, it is purely advisory. The value is text. The
  exception is for style sheet links that are <a id=the-link-element:in-a-document-tree href=https://dom.spec.whatwg.org/#in-a-document-tree data-x-internal=in-a-document-tree>in a document tree</a>, for which the <code id=the-link-element:attr-link-title-4><a href=#attr-link-title>title</a></code> attribute defines <a href=https://drafts.csswg.org/cssom/#css-style-sheet-set id=the-link-element:css-style-sheet-set data-x-internal=css-style-sheet-set>CSS
  style sheet sets</a>.</p>

  <p class=note>The <code id=the-link-element:attr-link-title-5><a href=#attr-link-title>title</a></code> attribute on <code id=the-link-element:the-link-element-14><a href=#the-link-element>link</a></code>
  elements differs from the global <code id=the-link-element:attr-title><a href=dom.html#attr-title>title</a></code> attribute of most other
  elements in that a link without a title does not inherit the title of the parent element: it
  merely has no title.</p>

  <hr>

  <p>The <dfn data-dfn-for=link id=attr-link-imagesrcset data-dfn-type=element-attr><code>imagesrcset</code></dfn>
  attribute may be present, and is a <a id=the-link-element:srcset-attribute href=images.html#srcset-attribute>srcset attribute</a>.</p>

  <p>The <code id=the-link-element:attr-link-imagesrcset-3><a href=#attr-link-imagesrcset>imagesrcset</a></code> and <code id=the-link-element:attr-link-href-4><a href=#attr-link-href>href</a></code> attributes (if <a href=images.html#width-descriptor id=the-link-element:width-descriptor>width
  descriptors</a> are not used) together contribute the <span>image
  sources</span> to the <span>source set</span>.</p>

  <p>If the <code id=the-link-element:attr-link-imagesrcset-4><a href=#attr-link-imagesrcset>imagesrcset</a></code> attribute is present and has any
  <a href=images.html#image-candidate-string id=the-link-element:image-candidate-string>image candidate strings</a> using a <a id=the-link-element:width-descriptor-2 href=images.html#width-descriptor>width
  descriptor</a>, the <dfn data-dfn-for=link id=attr-link-imagesizes data-dfn-type=element-attr><code>imagesizes</code></dfn> attribute must also be present, and is a
  <a id=the-link-element:sizes-attribute href=images.html#sizes-attribute>sizes attribute</a>. The <code id=the-link-element:attr-link-imagesizes-2><a href=#attr-link-imagesizes>imagesizes</a></code> attribute
  contributes the <span>source size</span> to the <span>source set</span>.</p>

  <p>The <code id=the-link-element:attr-link-imagesrcset-5><a href=#attr-link-imagesrcset>imagesrcset</a></code> and <code id=the-link-element:attr-link-imagesizes-3><a href=#attr-link-imagesizes>imagesizes</a></code> attributes must only be specified on
  <code id=the-link-element:the-link-element-15><a href=#the-link-element>link</a></code> elements that have both a <code id=the-link-element:attr-link-rel-15><a href=#attr-link-rel>rel</a></code> attribute that
  specifies the <code id=the-link-element:link-type-preload-5><a href=links.html#link-type-preload>preload</a></code> keyword, as well as an <code id=the-link-element:attr-link-as-2><a href=#attr-link-as>as</a></code> attribute in the "<code>image</code>" state.</p>

  <div class=example>
   <p>These attributes allow preloading the appropriate resource that is later used by an
   <code id=the-link-element:the-img-element><a href=embedded-content.html#the-img-element>img</a></code> element that has the corresponding values for its <code id=the-link-element:attr-img-srcset><a href=embedded-content.html#attr-img-srcset>srcset</a></code> and <code id=the-link-element:attr-img-sizes><a href=embedded-content.html#attr-img-sizes>sizes</a></code>
   attributes:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;preload&quot;</c-> <c- e>as</c-><c- o>=</c-><c- s>&quot;image&quot;</c->
      <c- e>imagesrcset</c-><c- o>=</c-><c- s>&quot;wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w&quot;</c->
      <c- e>imagesizes</c-><c- o>=</c-><c- s>&quot;50vw&quot;</c-><c- p>&gt;</c->

<c- c>&lt;!-- ... later, or perhaps inserted dynamically ... --&gt;</c->
<c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;wolf.jpg&quot;</c-> <c- e>alt</c-><c- o>=</c-><c- s>&quot;A rad wolf&quot;</c->
     <c- e>srcset</c-><c- o>=</c-><c- s>&quot;wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w&quot;</c->
     <c- e>sizes</c-><c- o>=</c-><c- s>&quot;50vw&quot;</c-><c- p>&gt;</c-></code></pre>

     <p>Note how we omit the <code id=the-link-element:attr-link-href-5><a href=#attr-link-href>href</a></code> attribute, as it would only
     be relevant for browsers that do not support <code id=the-link-element:attr-link-imagesrcset-6><a href=#attr-link-imagesrcset>imagesrcset</a></code>, and in those cases it would likely cause the
     incorrect image to be preloaded.</p>
  </div>

  <div class=example>
   <p>The <code id=the-link-element:attr-link-imagesrcset-7><a href=#attr-link-imagesrcset>imagesrcset</a></code> attribute can be combined with the
   <code id=the-link-element:attr-link-media-3><a href=#attr-link-media>media</a></code> attribute to preload the appropriate resource
   selected from a <code id=the-link-element:the-picture-element><a href=embedded-content.html#the-picture-element>picture</a></code> element's sources, for <a id=the-link-element:art-direction href=images.html#art-direction>art direction</a>:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;preload&quot;</c-> <c- e>as</c-><c- o>=</c-><c- s>&quot;image&quot;</c->
      <c- e>imagesrcset</c-><c- o>=</c-><c- s>&quot;dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x&quot;</c->
      <c- e>media</c-><c- o>=</c-><c- s>&quot;(max-width: 800px)&quot;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>link</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;preload&quot;</c-> <c- e>as</c-><c- o>=</c-><c- s>&quot;image&quot;</c->
      <c- e>imagesrcset</c-><c- o>=</c-><c- s>&quot;dog-wide-1x.jpg, dog-wide-2x.jpg 2x&quot;</c->
      <c- e>media</c-><c- o>=</c-><c- s>&quot;(min-width: 801px)&quot;</c-><c- p>&gt;</c->

<c- c>&lt;!-- ... later, or perhaps inserted dynamically ... --&gt;</c->
<c- p>&lt;</c-><c- f>picture</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>source</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x&quot;</c->
          <c- e>media</c-><c- o>=</c-><c- s>&quot;(max-width: 800px)&quot;</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;dog-wide-1x.jpg&quot;</c-> <c- e>srcset</c-><c- o>=</c-><c- s>&quot;dog-wide-2x.jpg 2x&quot;</c->
       <c- e>alt</c-><c- o>=</c-><c- s>&quot;An awesome dog&quot;</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>picture</c-><c- p>&gt;</c-></code></pre>
  </div>

  <hr>

  <p>The <dfn data-dfn-for=link id=attr-link-sizes data-dfn-type=element-attr><code>sizes</code></dfn> attribute
  gives the sizes of icons for visual media. Its value, if present, is merely advisory. If specified, the attribute must have a value that is an <a id=the-link-element:unordered-set-of-unique-space-separated-tokens-2 href=common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens>unordered set of
  unique space-separated tokens</a> which are <a id=the-link-element:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a>. Each value
  must be either an <a id=the-link-element:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code id=the-link-element:attr-link-sizes-any><a href=links.html#attr-link-sizes-any>any</a></code>", or a value that consists of two <a href=common-microsyntaxes.html#valid-non-negative-integer id=the-link-element:valid-non-negative-integer>valid non-negative integers</a> that do not have a leading U+0030 DIGIT
  ZERO (0) character and that are separated by a single U+0078 LATIN SMALL LETTER X or U+0058 LATIN
  CAPITAL LETTER X character. The attribute must only be specified on <code id=the-link-element:the-link-element-16><a href=#the-link-element>link</a></code> elements
  that have a <code id=the-link-element:attr-link-rel-16><a href=#attr-link-rel>rel</a></code> attribute that specifies the <code id=the-link-element:rel-icon-2><a href=links.html#rel-icon>icon</a></code> keyword or the <code>apple-touch-icon</code> keyword.</p>

  <p class=note>The <code>apple-touch-icon</code> keyword is a registered <a href=links.html#concept-rel-extensions id=the-link-element:concept-rel-extensions>extension to the predefined set of link types</a>, but user
  agents are not required to support it in any way.</p>

  <hr>

  <p>The <dfn data-dfn-for=link id=attr-link-as data-dfn-type=element-attr><code>as</code></dfn> attribute
  specifies the <a href=https://fetch.spec.whatwg.org/#concept-potential-destination id=the-link-element:concept-potential-destination-2 data-x-internal=concept-potential-destination>potential destination</a> for a
  preload request for the resource given by the <code id=the-link-element:attr-link-href-6><a href=#attr-link-href>href</a></code> attribute.
  It is an <a id=the-link-element:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a>. Each <a href=https://fetch.spec.whatwg.org/#concept-potential-destination id=the-link-element:concept-potential-destination-3 data-x-internal=concept-potential-destination>potential destination</a> is a keyword for this
  attribute, mapping to a state of the same name. The attribute must be specified on
  <code id=the-link-element:the-link-element-17><a href=#the-link-element>link</a></code> elements that have a <code id=the-link-element:attr-link-rel-17><a href=#attr-link-rel>rel</a></code> attribute that
  contains the <code id=the-link-element:link-type-preload-6><a href=links.html#link-type-preload>preload</a></code> keyword. It may be specified on
  <code id=the-link-element:the-link-element-18><a href=#the-link-element>link</a></code> elements that have a <code id=the-link-element:attr-link-rel-18><a href=#attr-link-rel>rel</a></code> attribute that
  contains the <code id=the-link-element:link-type-modulepreload-3><a href=links.html#link-type-modulepreload>modulepreload</a></code> keyword; in such cases it must
  have a value which is a <a href=https://fetch.spec.whatwg.org/#request-destination-script-like id=the-link-element:concept-script-like-destination data-x-internal=concept-script-like-destination>script-like
  destination</a>. For other <code id=the-link-element:the-link-element-19><a href=#the-link-element>link</a></code> elements, it must not be specified.</p>

  

  <p class=note>The attribute does not have a <i id=the-link-element:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value
  default</a></i> or <i id=the-link-element:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i>, meaning that invalid
  or missing values for the attribute map to no state. This is accounted for in the processing
  model. For <code id=the-link-element:link-type-preload-7><a href=links.html#link-type-preload>preload</a></code> links, both conditions are an error; for
  <code id=the-link-element:link-type-modulepreload-4><a href=links.html#link-type-modulepreload>modulepreload</a></code> links, a missing value will be treated as
  "<code>script</code>".</p>

  <hr>

  <p>The <dfn data-dfn-for=link id=attr-link-blocking data-dfn-type=element-attr><code>blocking</code></dfn>
  attribute is a <a id=the-link-element:blocking-attribute href=urls-and-fetching.html#blocking-attribute>blocking attribute</a>. It is used by link types <code id=the-link-element:link-type-stylesheet-3><a href=links.html#link-type-stylesheet>stylesheet</a></code> and <code id=the-link-element:link-type-expect><a href=links.html#link-type-expect>expect</a></code>, and it must only be specified on link elements
  that have a <code id=the-link-element:attr-link-rel-19><a href=#attr-link-rel>rel</a></code> attribute containing those keywords.</p>

  <hr>

  <p>The <dfn data-dfn-for=link id=attr-link-color data-dfn-type=element-attr><code>color</code></dfn> attribute is
  used with the <code>mask-icon</code> link type. The attribute must only be specified on
  <code id=the-link-element:the-link-element-20><a href=#the-link-element>link</a></code> elements that have a <code id=the-link-element:attr-link-rel-20><a href=#attr-link-rel>rel</a></code> attribute that
  contains the <code>mask-icon</code> keyword. The value must be a string that matches the
  CSS <a id=the-link-element:color href=https://drafts.csswg.org/css-color/#typedef-color data-x-internal=color>&lt;color></a> production, defining a suggested color that user agents can use to
  customize the display of the icon that the user sees when they pin your site.</p>

  <p class=note>This specification does not have any user agent requirements for the <code id=the-link-element:attr-link-color-2><a href=#attr-link-color>color</a></code> attribute.</p>

  <p class=note>The <code>mask-icon</code> keyword is a registered <a href=links.html#concept-rel-extensions id=the-link-element:concept-rel-extensions-2>extension to the predefined set of link types</a>, but user
  agents are not required to support it in any way.</p>

  <hr>

  <p><code id=the-link-element:the-link-element-21><a href=#the-link-element>link</a></code> elements have an associated <dfn id=explicitly-enabled>explicitly enabled</dfn> boolean. It is
  initially false.

  <p>The <dfn data-dfn-for=link id=attr-link-disabled data-dfn-type=element-attr><code>disabled</code></dfn>
  attribute is a <a id=the-link-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a> that is used with the <code id=the-link-element:link-type-stylesheet-4><a href=links.html#link-type-stylesheet>stylesheet</a></code> link type.  The attribute must only be specified on
  <code id=the-link-element:the-link-element-22><a href=#the-link-element>link</a></code> elements that have a <code id=the-link-element:attr-link-rel-21><a href=#attr-link-rel>rel</a></code> attribute that
  contains the <code id=the-link-element:link-type-stylesheet-5><a href=links.html#link-type-stylesheet>stylesheet</a></code> keyword.</p>

  <p>Whenever the <code id=the-link-element:attr-link-disabled-2><a href=#attr-link-disabled>disabled</a></code> attribute is removed, set the
  <code id=the-link-element:the-link-element-23><a href=#the-link-element>link</a></code> element's <a href=#explicitly-enabled id=the-link-element:explicitly-enabled>explicitly enabled</a> attribute to true.</p>

  <div class=example>
   <p>Removing the <code id=the-link-element:attr-link-disabled-3><a href=#attr-link-disabled>disabled</a></code> attribute dynamically, e.g.,
   using <code>document.querySelector("link").removeAttribute("disabled")</code>, will
   fetch and apply the style sheet:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>link</c-> <c- e>disabled</c-> <c- e>rel</c-><c- o>=</c-><c- s>&quot;alternate stylesheet&quot;</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;css/pooh&quot;</c-><c- p>&gt;</c-></code></pre>
  </div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/fetchPriority title="The fetchPriority property of the HTMLLinkElement interface represents a hint given to the browser on how it should prioritize the preload of the given resource relative to other resources of the same type.">HTMLLinkElement/fetchPriority</a><div class=support><span class="firefox no"><span>Firefox</span><span>No</span></span><span class="safari yes"><span>Safari</span><span title="Requires setting a user preference or runtime flag.">🔰 preview+</span></span><span class="chrome yes"><span>Chrome</span><span>102+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>102+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=link id=attr-link-fetchpriority data-dfn-type=element-attr><code>fetchpriority</code></dfn> attribute is a <a id=the-link-element:fetch-priority-attribute href=urls-and-fetching.html#fetch-priority-attribute>fetch
  priority attribute</a> that is intended for use with <a href=links.html#external-resource-link id=the-link-element:external-resource-link-8>external resource links</a>, where it is used to set the <a href=https://fetch.spec.whatwg.org/#request-priority id=the-link-element:concept-request-priority-2 data-x-internal=concept-request-priority>priority</a> used when <span>fetching and processing the linked
  resource</span>.</p>

  

  <h5 id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element><span class=secno>4.2.4.1</span> Providing users with a means to follow hyperlinks created using the <code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:the-link-element><a href=#the-link-element>link</a></code>
  element<a href=#providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element class=self-link></a></h5>

  <p id=linkui>Interactive user agents may provide users with a means to <span>follow the hyperlinks</span> created using the <code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:the-link-element-2><a href=#the-link-element>link</a></code> element, somewhere
  within their user interface. Such invocations of the <span>follow
  the hyperlink</span> algorithm must set the <i>userInvolvement</i> argument to "<code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:uni-browser-ui><a href=browsing-the-web.html#uni-browser-ui>browser UI</a></code>". The exact interface is not defined by this
  specification, but it could include the following information (obtained from the element's
  attributes, again as defined below), in some form or another (possibly simplified), for each
  <a id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:hyperlink href=links.html#hyperlink>hyperlink</a> created with each <code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:the-link-element-3><a href=#the-link-element>link</a></code> element in the document:</p>

  <ul><li>The relationship between this document and the resource (given by the <code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:attr-link-rel><a href=#attr-link-rel>rel</a></code> attribute)<li>The title of the resource (given by the <code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:attr-link-title><a href=#attr-link-title>title</a></code>
   attribute).<li>The address of the resource (given by the <code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:attr-link-href><a href=#attr-link-href>href</a></code>
   attribute).<li>The language of the resource (given by the <code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:attr-link-hreflang><a href=#attr-link-hreflang>hreflang</a></code>
   attribute).<li>The optimum media for the resource (given by the <code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:attr-link-media><a href=#attr-link-media>media</a></code>
   attribute).</ul>

  <p>User agents could also include other information, such as the type of the resource (as given by
  the <code id=providing-users-with-a-means-to-follow-hyperlinks-created-using-the-link-element:attr-link-type><a href=#attr-link-type>type</a></code> attribute).</p>




  <h4 id=the-meta-element><span class=secno>4.2.5</span> The <dfn id=meta data-dfn-type=element><code>meta</code></dfn>
  element<a href=#the-meta-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta title="The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.">Element/meta</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-meta-element:concept-element-categories>Categories</a>:<dd><a id=the-meta-element:metadata-content-2 href=dom.html#metadata-content-2>Metadata content</a>.<dd>If the <code id=the-meta-element:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: <a id=the-meta-element:flow-content-2 href=dom.html#flow-content-2>flow content</a>.<dd>If the <code id=the-meta-element:names:-the-itemprop-attribute-2><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: <a id=the-meta-element:phrasing-content-2 href=dom.html#phrasing-content-2>phrasing content</a>.<dt><a href=dom.html#concept-element-contexts id=the-meta-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>If the <code id=the-meta-element:attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute is present, or if the element's <code id=the-meta-element:attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute is in the <a href=#attr-meta-http-equiv-content-type id=the-meta-element:attr-meta-http-equiv-content-type>Encoding declaration state</a>: in a <code id=the-meta-element:the-head-element><a href=#the-head-element>head</a></code> element.<dd>If the <code id=the-meta-element:attr-meta-http-equiv-2><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute is present but not in the <a href=#attr-meta-http-equiv-content-type id=the-meta-element:attr-meta-http-equiv-content-type-2>Encoding declaration state</a>: in a <code id=the-meta-element:the-head-element-2><a href=#the-head-element>head</a></code> element.<dd>If the <code id=the-meta-element:attr-meta-http-equiv-3><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute is present but not in the <a href=#attr-meta-http-equiv-content-type id=the-meta-element:attr-meta-http-equiv-content-type-3>Encoding declaration state</a>: in a <code id=the-meta-element:the-noscript-element><a href=scripting.html#the-noscript-element>noscript</a></code> element that is a child of a <code id=the-meta-element:the-head-element-3><a href=#the-head-element>head</a></code> element.<dd>If the <code id=the-meta-element:attr-meta-name><a href=#attr-meta-name>name</a></code> attribute is present: where <a id=the-meta-element:metadata-content-2-2 href=dom.html#metadata-content-2>metadata content</a> is expected.<dd>If the <code id=the-meta-element:names:-the-itemprop-attribute-3><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: where <a id=the-meta-element:metadata-content-2-3 href=dom.html#metadata-content-2>metadata content</a> is expected.<dd>If the <code id=the-meta-element:names:-the-itemprop-attribute-4><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is present: where <a id=the-meta-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-meta-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-meta-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-meta-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-meta-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-meta-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-meta-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-meta-element:attr-meta-name-2><a href=#attr-meta-name>name</a></code> —  Metadata name
     <dd><code id=the-meta-element:attr-meta-http-equiv-4><a href=#attr-meta-http-equiv>http-equiv</a></code> —  Pragma directive
     <dd><code id=the-meta-element:attr-meta-content><a href=#attr-meta-content>content</a></code> —  Value of the element
     <dd><code id=the-meta-element:attr-meta-charset-2><a href=#attr-meta-charset>charset</a></code> —  <a href=#character-encoding-declaration id=the-meta-element:character-encoding-declaration>Character encoding declaration</a>
     <dd><code id=the-meta-element:attr-meta-media><a href=#attr-meta-media>media</a></code> —  Applicable media
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-meta-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-meta>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-meta>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-meta-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLMetaElement</code>.</dl>

  <p>The <code id=the-meta-element:the-meta-element><a href=#the-meta-element>meta</a></code> element <a id=the-meta-element:represents href=dom.html#represents>represents</a> various kinds of metadata that cannot be
  expressed using the <code id=the-meta-element:the-title-element><a href=#the-title-element>title</a></code>, <code id=the-meta-element:the-base-element><a href=#the-base-element>base</a></code>, <code id=the-meta-element:the-link-element><a href=#the-link-element>link</a></code>, <code id=the-meta-element:the-style-element><a href=#the-style-element>style</a></code>,
  and <code id=the-meta-element:the-script-element><a href=scripting.html#the-script-element>script</a></code> elements.</p>

  <p>The <code id=the-meta-element:the-meta-element-2><a href=#the-meta-element>meta</a></code> element can represent document-level metadata with the <code id=the-meta-element:attr-meta-name-3><a href=#attr-meta-name>name</a></code> attribute, pragma directives with the <code id=the-meta-element:attr-meta-http-equiv-5><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute, and the file's <a href=#character-encoding-declaration id=the-meta-element:character-encoding-declaration-2>character encoding
  declaration</a> when an HTML document is serialized to string form (e.g. for transmission over
  the network or for disk storage) with the <code id=the-meta-element:attr-meta-charset-3><a href=#attr-meta-charset>charset</a></code>
  attribute.</p>

  <p>Exactly one of the <code id=the-meta-element:attr-meta-name-4><a href=#attr-meta-name>name</a></code>, <code id=the-meta-element:attr-meta-http-equiv-6><a href=#attr-meta-http-equiv>http-equiv</a></code>, <code id=the-meta-element:attr-meta-charset-4><a href=#attr-meta-charset>charset</a></code>,
  and <code id=the-meta-element:names:-the-itemprop-attribute-5><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attributes must be specified.</p>

  <p>If either <code id=the-meta-element:attr-meta-name-5><a href=#attr-meta-name>name</a></code>, <code id=the-meta-element:attr-meta-http-equiv-7><a href=#attr-meta-http-equiv>http-equiv</a></code>, or <code id=the-meta-element:names:-the-itemprop-attribute-6><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> is
  specified, then the <code id=the-meta-element:attr-meta-content-2><a href=#attr-meta-content>content</a></code> attribute must also be
  specified. Otherwise, it must be omitted.</p>

  <p>The <dfn data-dfn-for=meta id=attr-meta-charset data-dfn-type=element-attr><code>charset</code></dfn>
  attribute specifies the <a href=https://encoding.spec.whatwg.org/#encoding id=the-meta-element:encoding data-x-internal=encoding>character encoding</a> used by the document.
  This is a <a href=#character-encoding-declaration id=the-meta-element:character-encoding-declaration-3>character encoding declaration</a>. If the attribute is present, its value must
  be an <a id=the-meta-element:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>utf-8</code>".</p>

  <p class=note>The <code id=the-meta-element:attr-meta-charset-5><a href=#attr-meta-charset>charset</a></code> attribute on the
  <code id=the-meta-element:the-meta-element-3><a href=#the-meta-element>meta</a></code> element has no effect in XML documents, but is allowed in XML documents in order
  to facilitate migration to and from XML.</p>

  <p>There must not be more than one <code id=the-meta-element:the-meta-element-4><a href=#the-meta-element>meta</a></code> element with a <code id=the-meta-element:attr-meta-charset-6><a href=#attr-meta-charset>charset</a></code> attribute per document.</p>

  <p>The <dfn data-dfn-for=meta id=attr-meta-content data-dfn-type=element-attr><code>content</code></dfn>
  attribute gives the value of the document metadata or pragma directive when the element is used
  for those purposes. The allowed values depend on the exact context, as described in subsequent
  sections of this specification.</p>

  <p>If a <code id=the-meta-element:the-meta-element-5><a href=#the-meta-element>meta</a></code> element has a <dfn data-dfn-for=meta id=attr-meta-name data-dfn-type=element-attr><code>name</code></dfn> attribute, it sets document metadata. Document metadata
  is expressed in terms of name-value pairs, the <code id=the-meta-element:attr-meta-name-6><a href=#attr-meta-name>name</a></code> attribute
  on the <code id=the-meta-element:the-meta-element-6><a href=#the-meta-element>meta</a></code> element giving the name, and the <code id=the-meta-element:attr-meta-content-3><a href=#attr-meta-content>content</a></code> attribute on the same element giving the value. The name
  specifies what aspect of metadata is being set; valid names and the meaning of their values are
  described in the following sections. If a <code id=the-meta-element:the-meta-element-7><a href=#the-meta-element>meta</a></code> element has no <code id=the-meta-element:attr-meta-content-4><a href=#attr-meta-content>content</a></code> attribute, then the value part of the metadata
  name-value pair is the empty string.</p>

  <p>The <dfn data-dfn-for=meta id=attr-meta-media data-dfn-type=element-attr><code>media</code></dfn> attribute
  says which media the metadata applies to. The value must be a <a id=the-meta-element:valid-media-query-list href=common-microsyntaxes.html#valid-media-query-list>valid media query list</a>.
  Unless the <code id=the-meta-element:attr-meta-name-7><a href=#attr-meta-name>name</a></code> is <code id=the-meta-element:meta-theme-color><a href=#meta-theme-color>theme-color</a></code>, the <code id=the-meta-element:attr-meta-media-2><a href=#attr-meta-media>media</a></code>
  attribute has no effect on the processing model and must not be used by authors.</p>


  <h5 id=standard-metadata-names><span class=secno>4.2.5.1</span> Standard metadata names<a href=#standard-metadata-names class=self-link></a></h5><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name title="The <meta> element can be used to provide document metadata in terms of name-value pairs, with the name attribute giving the metadata name, and the content attribute giving the value.">Element/meta/name</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>6+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <p>This specification defines a few names for the <code id=standard-metadata-names:attr-meta-name><a href=#attr-meta-name>name</a></code>
  attribute of the <code id=standard-metadata-names:the-meta-element><a href=#the-meta-element>meta</a></code> element.</p>

  <p>Names are case-insensitive<span class=impl>, and must be compared in an <a id=standard-metadata-names:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
  case-insensitive</a> manner</span>.</p>

  <dl><dt><dfn data-dfn-for=meta/name id=meta-application-name data-dfn-type=attr-value><code>application-name</code></dfn><dd>
    <p>The value must be a short free-form string giving the name of the web application that the
    page represents. If the page is not a web application, the <code id=standard-metadata-names:meta-application-name><a href=#meta-application-name>application-name</a></code> metadata name must not be used.
    Translations of the web application's name may be given, using the <code id=standard-metadata-names:attr-lang><a href=dom.html#attr-lang>lang</a></code> attribute to specify the language of each name.</p>

    <p>There must not be more than one <code id=standard-metadata-names:the-meta-element-2><a href=#the-meta-element>meta</a></code> element with a given <span>language</span>
    and where the <code id=standard-metadata-names:attr-meta-name-2><a href=#attr-meta-name>name</a></code> attribute value is an
    <a id=standard-metadata-names:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for
    <code id=standard-metadata-names:meta-application-name-2><a href=#meta-application-name>application-name</a></code> per document.</p>

    
   <dt><dfn data-dfn-for=meta/name id=meta-author data-dfn-type=attr-value><code>author</code></dfn><dd><p>The value must be a free-form string giving the name of one of the page's
   authors.<dt><dfn data-dfn-for=meta/name id=meta-description data-dfn-type=attr-value><code>description</code></dfn><dd><p>The value must be a free-form string that describes the page. The value must be
   appropriate for use in a directory of pages, e.g. in a search engine. There must not be more than
   one <code id=standard-metadata-names:the-meta-element-3><a href=#the-meta-element>meta</a></code> element where the <code id=standard-metadata-names:attr-meta-name-3><a href=#attr-meta-name>name</a></code> attribute value
   is an <a id=standard-metadata-names:ascii-case-insensitive-3 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for
   <code id=standard-metadata-names:meta-description><a href=#meta-description>description</a></code> per document.<dt><dfn data-dfn-for=meta/name id=meta-generator data-dfn-type=attr-value><code>generator</code></dfn><dd>
    <p>The value must be a free-form string that identifies one of the software packages used to
    generate the document. This value must not be used on pages whose markup is not generated by
    software, e.g. pages whose markup was written by a user in a text editor.</p>

    <div class=example>

     <p>Here is what a tool called "Frontweaver" could include in its output, in the page's
     <code id=standard-metadata-names:the-head-element><a href=#the-head-element>head</a></code> element, to identify itself as the tool used to generate the page:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>meta</c-> <c- e>name</c-><c- o>=</c-><c- s>generator</c-> <c- e>content</c-><c- o>=</c-><c- s>&quot;Frontweaver 8.2&quot;</c-><c- p>&gt;</c-></code></pre>

    </div>
   <dt><dfn data-dfn-for=meta/name id=meta-keywords data-dfn-type=attr-value><code>keywords</code></dfn><dd>
    <p>The value must be a <a id=standard-metadata-names:set-of-comma-separated-tokens href=common-microsyntaxes.html#set-of-comma-separated-tokens>set of comma-separated tokens</a>, each of which is a keyword
    relevant to the page.</p>

    <div class=example>

     <p>This page about typefaces on British motorways uses a <code id=standard-metadata-names:the-meta-element-4><a href=#the-meta-element>meta</a></code> element to specify
     some keywords that users might use to look for the page:</p>

     <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en-GB&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Typefaces on UK motorways<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>meta</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;keywords&quot;</c-> <c- e>content</c-><c- o>=</c-><c- s>&quot;british,type face,font,fonts,highway,highways&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
  ...</code></pre>

    </div>

    <p class=note>Many search engines do not consider such keywords, because this feature has
    historically been used unreliably and even misleadingly as a way to spam search engine results
    in a way that is not helpful for users.</p>

    
   <dt><dfn data-dfn-for=meta/name id=meta-referrer data-dfn-type=attr-value><code>referrer</code></dfn><dd>
    <p>The value must be a <a id=standard-metadata-names:referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer policy</a>, which defines the default <a id=standard-metadata-names:referrer-policy-2 href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer
    policy</a> for the <code>Document</code>. <a href=references.html#refsREFERRERPOLICY>[REFERRERPOLICY]</a></p>

    
   <dt><dfn data-dfn-for=meta/name id=meta-theme-color data-dfn-type=attr-value><code>theme-color</code></dfn><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color title="The theme-color value for the name attribute of the <meta> element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. If specified, the content attribute must contain a valid CSS <color>.">Element/meta/name/theme-color</a><div class=support><span class="firefox no"><span>Firefox</span><span>No</span></span><span class="safari yes"><span>Safari</span><span>15+</span></span><span class="chrome yes"><span>Chrome</span><span title="Partial implementation.">🔰 73+</span></span><hr><span class="opera no"><span>Opera</span><span>No</span></span><span class="edge_blink yes"><span>Edge</span><span title="Partial implementation.">🔰 79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android yes"><span>Chrome Android</span><span>80+</span></span><span class="webview_android no"><span>WebView Android</span><span>No</span></span><span class="samsunginternet_android yes"><span>Samsung Internet</span><span>6.2+</span></span><span class="opera_android no"><span>Opera Android</span><span>No</span></span></div></div></div><dd>
    <p>The value must be a string that matches the CSS <a id=standard-metadata-names:color href=https://drafts.csswg.org/css-color/#typedef-color data-x-internal=color>&lt;color></a> production, defining
    a suggested color that user agents should use to customize the display of the page or of the
    surrounding user interface. For example, a browser might color the page's title bar with the
    specified value, or use it as a color highlight in a tab bar or task switcher.</p>

    <p>Within an HTML document, the <code id=standard-metadata-names:attr-meta-media><a href=#attr-meta-media>media</a></code> attribute value must
    be unique amongst all the <code id=standard-metadata-names:the-meta-element-5><a href=#the-meta-element>meta</a></code> elements with their <code id=standard-metadata-names:attr-meta-name-4><a href=#attr-meta-name>name</a></code> attribute value set to an <a id=standard-metadata-names:ascii-case-insensitive-4 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
    case-insensitive</a> match for <code id=standard-metadata-names:meta-theme-color><a href=#meta-theme-color>theme-color</a></code>.</p>

    <div class=example>

     <p>This standard itself uses "WHATWG green" as its theme color:</p>

     <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->HTML Standard<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>meta</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;theme-color&quot;</c-> <c- e>content</c-><c- o>=</c-><c- s>&quot;#3c790a&quot;</c-><c- p>&gt;</c->
...</code></pre>

    </div>

    <p>The <code id=standard-metadata-names:attr-meta-media-2><a href=#attr-meta-media>media</a></code> attribute may be used to describe the context
    in which the provided color should be used.</p>

    <div class=example>
     <p>If we only wanted to use "WHATWG green" as this standard's theme color in dark mode,
     we could use the <code>prefers-color-scheme</code> media feature:</p>

     <pre><code class='html'><c- cp>&lt;!DOCTYPE HTML&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->HTML Standard<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>meta</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;theme-color&quot;</c-> <c- e>content</c-><c- o>=</c-><c- s>&quot;#3c790a&quot;</c-> <c- e>media</c-><c- o>=</c-><c- s>&quot;(prefers-color-scheme: dark)&quot;</c-><c- p>&gt;</c->
...</code></pre>
    </div>

    

    <p>When using the theme color in UI, user agents may adjust it in implementation-specific ways
    to make it more suitable for the UI in question. For example, if a user agent intends to use
    the theme color as a background and display white text over it, it might use a darker variant of
    the theme color in that part of the UI, to ensure adequate contrast.</p>
   <dt><dfn data-dfn-for=meta/name id=meta-color-scheme data-dfn-type=attr-value><code>color-scheme</code></dfn><dd>
    <p>To aid user agents in rendering the page background with the desired color scheme immediately
    (rather than waiting for all CSS in the page to load), a <a id="standard-metadata-names:'color-scheme'" href=https://drafts.csswg.org/css-color-adjust/#color-scheme-prop data-x-internal="'color-scheme'">'color-scheme'</a> value can
    be provided in a <code id=standard-metadata-names:the-meta-element-6><a href=#the-meta-element>meta</a></code> element.</p>

    <p>The value must be a string that matches the syntax for the CSS <a id="standard-metadata-names:'color-scheme'-2" href=https://drafts.csswg.org/css-color-adjust/#color-scheme-prop data-x-internal="'color-scheme'">'color-scheme'</a>
    property value. It determines the <a id="standard-metadata-names:page's-supported-color-schemes" href=https://drafts.csswg.org/css-color-adjust/#pages-supported-color-schemes data-x-internal="page's-supported-color-schemes">page's supported color-schemes</a>.</p>

    <p>There must not be more than one <code id=standard-metadata-names:the-meta-element-7><a href=#the-meta-element>meta</a></code> element with its <code id=standard-metadata-names:attr-meta-name-5><a href=#attr-meta-name>name</a></code> attribute value set to an
    <a id=standard-metadata-names:ascii-case-insensitive-5 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for <code id=standard-metadata-names:meta-color-scheme><a href=#meta-color-scheme>color-scheme</a></code> per document.</p>

    <div class=example>
     <p>The following declaration indicates that the page is aware of and can handle a color scheme
     with dark background colors and light foreground colors:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>meta</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;color-scheme&quot;</c-> <c- e>content</c-><c- o>=</c-><c- s>&quot;dark&quot;</c-><c- p>&gt;</c-></code></pre>
    </div>

    

    <p class=note>Because these rules check successive elements until they find a match, an
    author can provide multiple such values to handle fallback for legacy user agents. Opposite to
    how CSS fallback works for properties, the multiple meta elements needs to be arranged with the
    legacy values after the newer values.</p>
   </dl>



  <h5 id=other-metadata-names><span class=secno>4.2.5.2</span> Other metadata names<a href=#other-metadata-names class=self-link></a></h5>

  <p>Anyone can create and use their own <dfn id=concept-meta-extensions>extensions to the
  predefined set of metadata names</dfn>. There is no requirement to register such extensions.</p>

  <p>However, a new metadata name should not be created in any of the following cases:</p>

  <ul><li><p>If either the name is a <a id=other-metadata-names:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>, or the value of its accompanying <code id=other-metadata-names:attr-meta-content><a href=#attr-meta-content>content</a></code> attribute is a <a id=other-metadata-names:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>; in those cases,
   registering it as an <a href=links.html#concept-rel-extensions id=other-metadata-names:concept-rel-extensions>extension to the predefined set of
   link types</a> is encouraged (rather than creating a new metadata name).<li><p>If the name is for something expected to have processing requirements in user agents; in
   that case it ought to be standardized.</ul>

  <p>Also, before creating and using a new metadata name, consulting the <a href=https://wiki.whatwg.org/wiki/MetaExtensions>WHATWG Wiki MetaExtensions page</a> is
  encouraged — to avoid choosing a metadata name that's already in use, and to avoid duplicating the
  purpose of any metadata names that are already in use, and to avoid new standardized names
  clashing with your chosen name. <a href=references.html#refsWHATWGWIKI>[WHATWGWIKI]</a></p>

  <p>Anyone is free to edit the WHATWG Wiki MetaExtensions page at any time to add a metadata name.
  New metadata names can be specified with the following information:</p>

  <dl><dt>Keyword<dd><p>The actual name being defined. The name should not be confusingly similar to any other
   defined name (e.g. differing only in case).<dt>Brief description<dd><p>A short non-normative description of what the metadata name's meaning is, including the
   format the value is required to be in.<dt>Specification<dd>A link to a more detailed description of the metadata name's semantics and requirements. It
   could be another page on the wiki, or a link to an external page.<dt>Synonyms<dd><p>A list of other names that have exactly the same processing requirements. Authors should
   not use the names defined to be synonyms (they are only intended to allow user agents to support
   legacy content). Anyone may remove synonyms that are not used in practice; only names that need to
   be processed as synonyms for compatibility with legacy content are to be registered in this
   way.<dt>Status<dd>
    <p>One of the following:</p>

    <dl><dt>Proposed<dd>The name has not received wide peer review and approval. Someone has proposed it and is, or
     soon will be, using it.<dt>Ratified<dd>The name has received wide peer review and approval. It has a specification that
     unambiguously defines how to handle pages that use the name, including when they use it in
     incorrect ways.<dt>Discontinued<dd>The metadata name has received wide peer review and it has been found wanting. Existing
     pages are using this metadata name, but new pages should avoid it. The "brief description" and
     "specification" entries will give details of what authors should use instead, if anything.</dl>

    <p>If a metadata name is found to be redundant with existing values, it should be removed and
    listed as a synonym for the existing value.</p>

    <p>If a metadata name is added in the "proposed" state for a period of a month or more without
    being used or specified, then it may be removed from the WHATWG Wiki MetaExtensions page.</p>

    <p>If a metadata name is added with the "proposed" status and found to be redundant with
    existing values, it should be removed and listed as a synonym for the existing value. If a
    metadata name is added with the "proposed" status and found to be harmful, then it should be
    changed to "discontinued" status.</p>

    <p>Anyone can change the status at any time, but should only do so in accordance with the
    definitions above.</p>
   </dl>



  <h5 id=pragma-directives><span class=secno>4.2.5.3</span> Pragma directives<a href=#pragma-directives class=self-link></a></h5>

  <p>When the <dfn data-dfn-for=meta id=attr-meta-http-equiv data-dfn-type=element-attr><code>http-equiv</code></dfn> attribute is specified on a
  <code id=pragma-directives:the-meta-element><a href=#the-meta-element>meta</a></code> element, the element is a pragma directive.</p>

  <div id=warning-http-equiv-unrelated-to-http-headers class=warning>
   <p>Despite the name <code id=pragma-directives:attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>, pragma directives are
   almost entirely unrelated to HTTP headers. Implementers and web developers are best off thinking
   of them as entirely separate, and the name as being a historical accident.</p>

   <p>In more detail, although the <code id=pragma-directives:attr-meta-http-equiv-refresh><a href=#attr-meta-http-equiv-refresh>refresh</a></code>
   keyword has the same processing model as the corresponding `<code id=pragma-directives:refresh><a href=speculative-loading.html#refresh>Refresh</a></code>` header, every
   other standardized pragma directive has at least slightly different behavior than the
   similarly-named header. (And usually dramatically-different behavior.)</p>

   <p>Implementers or specification writers contemplating adding new document-level pragmas or HTTP
   header-controlled switches should be cautious about this mismatch, and avoid perpetuating the
   existing confusion by adding the same or similar behavior to both an HTTP header and an <code id=pragma-directives:attr-meta-http-equiv-2><a href=#attr-meta-http-equiv>http-equiv</a></code> pragma. Instead, consider providing only an HTTP
   header, or if an in-document pragma is needed, consider adding a new attribute to
   <code id=pragma-directives:the-meta-element-2><a href=#the-meta-element>meta</a></code> similar to the model used by the <code id=pragma-directives:attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute. (Note that avoiding in-document pragmas is
   often the better choice, since the DOM is mutable. Thus, even in the simple case where the
   developer does not add, remove, or mutate <code id=pragma-directives:the-meta-element-3><a href=#the-meta-element>meta</a></code> elements, the policy will go from
   un-applied to applied during parsing, which can have complex implications.)</p>
  </div>

  <p>The <code id=pragma-directives:attr-meta-http-equiv-3><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute is an <a id=pragma-directives:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated
  attribute</a> with the following keywords and states:</p>

  <table id=table-http-equiv class=yesno><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=meta/http-equiv id=attr-meta-http-equiv-keyword-content-type data-dfn-type=attr-value><code>content-type</code></dfn>
     <td><a href=#attr-meta-http-equiv-content-type id=pragma-directives:attr-meta-http-equiv-content-type>Encoding declaration</a>
     <td>An alternative form of setting the <code id=pragma-directives:attr-meta-charset-2><a href=#attr-meta-charset>charset</a></code>.
    <tr><td><dfn data-dfn-for=meta/http-equiv id=attr-meta-http-equiv-keyword-default-style data-dfn-type=attr-value><code>default-style</code></dfn>
     <td><a href=#attr-meta-http-equiv-default-style id=pragma-directives:attr-meta-http-equiv-default-style>Default style</a>
     <td>Sets the <a href=https://drafts.csswg.org/cssom/#css-style-sheet-set-name id=pragma-directives:css-style-sheet-set-name data-x-internal=css-style-sheet-set-name>name</a> of the default
     <a id=pragma-directives:css-style-sheet-set href=https://drafts.csswg.org/cssom/#css-style-sheet-set data-x-internal=css-style-sheet-set>CSS style sheet set</a>.
    <tr><td><dfn data-dfn-for=meta/http-equiv id=attr-meta-http-equiv-keyword-refresh data-dfn-type=attr-value><code>refresh</code></dfn>
     <td><a href=#attr-meta-http-equiv-refresh id=pragma-directives:attr-meta-http-equiv-refresh-2>Refresh</a>
     <td>Acts as a timed redirect.
    <tr><td><dfn data-dfn-for=meta/http-equiv id=attr-meta-http-equiv-keyword-x-ua-compatible data-dfn-type=attr-value><code>x-ua-compatible</code></dfn>
     <td><a href=#attr-meta-http-equiv-x-ua-compatible id=pragma-directives:attr-meta-http-equiv-x-ua-compatible>X-UA-Compatible</a>
     <td>In practice, encourages Internet Explorer to more closely follow the specifications.
    <tr><td><dfn data-dfn-for=meta/http-equiv id=attr-meta-http-equiv-keyword-content-security-policy data-dfn-type=attr-value><code>content-security-policy</code></dfn>
     <td><a href=#attr-meta-http-equiv-content-security-policy id=pragma-directives:attr-meta-http-equiv-content-security-policy>Content security policy</a>
     <td><a href=https://w3c.github.io/webappsec-csp/#enforced id=pragma-directives:enforce-the-policy data-x-internal=enforce-the-policy>Enforces</a> a <a id=pragma-directives:content-security-policy href=https://w3c.github.io/webappsec-csp/#content-security-policy-object data-x-internal=content-security-policy>Content Security
     Policy</a> on a <code>Document</code>.
  </table>



  

  <dl><dt><dfn id=attr-meta-http-equiv-content-type>Encoding declaration state</dfn> (<code>http-equiv="<code id=pragma-directives:attr-meta-http-equiv-keyword-content-type><a href=#attr-meta-http-equiv-keyword-content-type>content-type</a></code>"</code>)

   <dd>
    <p>The <a href=#attr-meta-http-equiv-content-type id=pragma-directives:attr-meta-http-equiv-content-type-2>Encoding declaration state</a> is
    just an alternative form of setting the <code id=pragma-directives:attr-meta-charset-3><a href=#attr-meta-charset>charset</a></code>
    attribute: it is a <a href=#character-encoding-declaration id=pragma-directives:character-encoding-declaration>character encoding declaration</a>. </p>

    <p>For <code id=pragma-directives:the-meta-element-4><a href=#the-meta-element>meta</a></code> elements with an <code id=pragma-directives:attr-meta-http-equiv-4><a href=#attr-meta-http-equiv>http-equiv</a></code>
    attribute in the <a href=#attr-meta-http-equiv-content-type id=pragma-directives:attr-meta-http-equiv-content-type-3>Encoding declaration
    state</a>, the <code id=pragma-directives:attr-meta-content><a href=#attr-meta-content>content</a></code> attribute must have a value
    that is an <a id=pragma-directives:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for a string that consists of:
    "<code>text/html;</code>", optionally followed by any number of <a id=pragma-directives:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII
    whitespace</a>, followed by "<code>charset=utf-8</code>".</p>

    <p>A document must not contain both a <code id=pragma-directives:the-meta-element-5><a href=#the-meta-element>meta</a></code> element with an <code id=pragma-directives:attr-meta-http-equiv-5><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the <a href=#attr-meta-http-equiv-content-type id=pragma-directives:attr-meta-http-equiv-content-type-4>Encoding declaration state</a> and a
    <code id=pragma-directives:the-meta-element-6><a href=#the-meta-element>meta</a></code> element with the <code id=pragma-directives:attr-meta-charset-4><a href=#attr-meta-charset>charset</a></code> attribute
    present.</p>

    <p>The <a href=#attr-meta-http-equiv-content-type id=pragma-directives:attr-meta-http-equiv-content-type-5>Encoding declaration state</a> may be
    used in <a id=pragma-directives:html-documents href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML documents</a>, but elements with an <code id=pragma-directives:attr-meta-http-equiv-6><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in that state must not be used in
    <a id=pragma-directives:xml-documents href=https://dom.spec.whatwg.org/#xml-document data-x-internal=xml-documents>XML documents</a>.</p>
   <dt><dfn id=attr-meta-http-equiv-default-style>Default style state</dfn> (<code>http-equiv="<code id=pragma-directives:attr-meta-http-equiv-keyword-default-style><a href=#attr-meta-http-equiv-keyword-default-style>default-style</a></code>"</code>)

   <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in one engine only." class=less-than-two-engines-flag>⚠</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets title="Specifying alternative style sheets in a web page provides a way for users to see multiple versions of a page, based on their needs or preferences.">Alternative_style_sheets</a><p class=less-than-two-engines-text>Support in one engine only.<div class=support><span class="firefox yes"><span>Firefox</span><span>3+</span></span><span class="safari unknown"><span>Safari</span><span>?</span></span><span class="chrome no"><span>Chrome</span><span>1–48</span></span><hr><span class="opera yes"><span>Opera</span><span>Yes</span></span><span class="edge_blink no"><span>Edge</span><span>No</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>
    <p>This pragma sets the <a href=https://drafts.csswg.org/cssom/#css-style-sheet-set-name id=pragma-directives:css-style-sheet-set-name-2 data-x-internal=css-style-sheet-set-name>name</a> of the default
    <a id=pragma-directives:css-style-sheet-set-2 href=https://drafts.csswg.org/cssom/#css-style-sheet-set data-x-internal=css-style-sheet-set>CSS style sheet set</a>.</p>

    
   <dt><dfn id=attr-meta-http-equiv-refresh>Refresh state</dfn> (<code>http-equiv="<code id=pragma-directives:attr-meta-http-equiv-keyword-refresh><a href=#attr-meta-http-equiv-keyword-refresh>refresh</a></code>"</code>)

   <dd>
    <p>This pragma acts as a timed redirect.</p>

    <p>A <code>Document</code> object has an associated <dfn data-dfn-for=Document id=will-declaratively-refresh>will declaratively
    refresh</dfn> (a boolean). It is initially false.</p>

    

    <p id=conformance-attr-meta-http-equiv-refresh>For <code id=pragma-directives:the-meta-element-7><a href=#the-meta-element>meta</a></code> elements with an <code id=pragma-directives:attr-meta-http-equiv-7><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the <a href=#attr-meta-http-equiv-refresh id=pragma-directives:attr-meta-http-equiv-refresh-3>Refresh state</a>, the <code id=pragma-directives:attr-meta-content-2><a href=#attr-meta-content>content</a></code> attribute must have a value consisting either of:</p>

    <ul><li>just a <a id=pragma-directives:valid-non-negative-integer href=common-microsyntaxes.html#valid-non-negative-integer>valid non-negative integer</a>, or<li>a <a id=pragma-directives:valid-non-negative-integer-2 href=common-microsyntaxes.html#valid-non-negative-integer>valid non-negative integer</a>, followed by a U+003B SEMICOLON character
     (;), followed by one or more <a id=pragma-directives:space-characters-2 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII whitespace</a>, followed by a substring that is
     an <a id=pragma-directives:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>URL</code>",
     followed by a U+003D EQUALS SIGN character (=), followed by a <a id=pragma-directives:valid-url-string href=https://url.spec.whatwg.org/#valid-url-string data-x-internal=valid-url-string>valid URL string</a>
     that does not start with a literal U+0027 APOSTROPHE (') or U+0022 QUOTATION MARK (")
     character.</ul>

    <p>In the former case, the integer represents a number of seconds before the page is to be
    reloaded; in the latter case the integer represents a number of seconds before the page is to be
    replaced by the page at the given <a id=pragma-directives:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>.</p>

    <div class=example>
     <p>A news organization's front page could include the following markup in the page's
     <code id=pragma-directives:the-head-element><a href=#the-head-element>head</a></code> element, to ensure that the page automatically reloads from the server every
     five minutes:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>meta</c-> <c- e>http-equiv</c-><c- o>=</c-><c- s>&quot;Refresh&quot;</c-> <c- e>content</c-><c- o>=</c-><c- s>&quot;300&quot;</c-><c- p>&gt;</c-></code></pre>
    </div>

    <div class=example>
     <p>A sequence of pages could be used as an automated slide show by making each page refresh to
     the next page in the sequence, using markup such as the following:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>meta</c-> <c- e>http-equiv</c-><c- o>=</c-><c- s>&quot;Refresh&quot;</c-> <c- e>content</c-><c- o>=</c-><c- s>&quot;20; URL=page4.html&quot;</c-><c- p>&gt;</c-></code></pre>
    </div>
   <dt><dfn id=attr-meta-http-equiv-x-ua-compatible>X-UA-Compatible state</dfn> (<code>http-equiv="<code id=pragma-directives:attr-meta-http-equiv-keyword-x-ua-compatible><a href=#attr-meta-http-equiv-keyword-x-ua-compatible>x-ua-compatible</a></code>"</code>)

   <dd>
    <p>In practice, this pragma encourages Internet Explorer to more closely follow the
    specifications.</p>

    <p>For <code id=pragma-directives:the-meta-element-8><a href=#the-meta-element>meta</a></code> elements with an <code id=pragma-directives:attr-meta-http-equiv-8><a href=#attr-meta-http-equiv>http-equiv</a></code>
    attribute in the <a href=#attr-meta-http-equiv-x-ua-compatible id=pragma-directives:attr-meta-http-equiv-x-ua-compatible-2>X-UA-Compatible state</a>, the
    <code id=pragma-directives:attr-meta-content-3><a href=#attr-meta-content>content</a></code> attribute must have a value that is an
    <a id=pragma-directives:ascii-case-insensitive-3 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string "<code>IE=edge</code>".</p>

    <p>User agents are required to ignore this pragma.</p>
   <dt><dfn id=attr-meta-http-equiv-content-security-policy data-export="">Content security policy state</dfn> (<code>http-equiv="<code id=pragma-directives:attr-meta-http-equiv-keyword-content-security-policy><a href=#attr-meta-http-equiv-keyword-content-security-policy>content-security-policy</a></code>"</code>)

   <dd>
    <p>This pragma <a href=https://w3c.github.io/webappsec-csp/#enforced id=pragma-directives:enforce-the-policy-2 data-x-internal=enforce-the-policy>enforces</a> a <a id=pragma-directives:content-security-policy-2 href=https://w3c.github.io/webappsec-csp/#content-security-policy-object data-x-internal=content-security-policy>Content Security
    Policy</a> on a <code>Document</code>. <a href=references.html#refsCSP>[CSP]</a></p>

    

    <p>For <code id=pragma-directives:the-meta-element-9><a href=#the-meta-element>meta</a></code> elements with an <code id=pragma-directives:attr-meta-http-equiv-9><a href=#attr-meta-http-equiv>http-equiv</a></code>
    attribute in the <a href=#attr-meta-http-equiv-content-security-policy id=pragma-directives:attr-meta-http-equiv-content-security-policy-2>Content security
    policy state</a>, the <code id=pragma-directives:attr-meta-content-4><a href=#attr-meta-content>content</a></code> attribute must have a
    value consisting of a <a href=https://w3c.github.io/webappsec-csp/#grammardef-serialized-policy id=pragma-directives:content-security-policy-syntax data-x-internal=content-security-policy-syntax>valid Content Security
    Policy</a>, but must not contain any <code id=pragma-directives:report-uri-directive><a data-x-internal=report-uri-directive href=https://w3c.github.io/webappsec-csp/#report-uri>report-uri</a></code>,
    <code id=pragma-directives:frame-ancestors-directive><a data-x-internal=frame-ancestors-directive href=https://w3c.github.io/webappsec-csp/#frame-ancestors>frame-ancestors</a></code>, or <code id=pragma-directives:sandbox-directive><a data-x-internal=sandbox-directive href=https://w3c.github.io/webappsec-csp/#sandbox>sandbox</a></code> <a href=https://w3c.github.io/webappsec-csp/#directives id=pragma-directives:content-security-policy-directive data-x-internal=content-security-policy-directive>directives</a>.
    The <a id=pragma-directives:content-security-policy-3 href=https://w3c.github.io/webappsec-csp/#content-security-policy-object data-x-internal=content-security-policy>Content Security Policy</a> given in the <code id=pragma-directives:attr-meta-content-5><a href=#attr-meta-content>content</a></code> attribute will be <a href=https://w3c.github.io/webappsec-csp/#enforced id=pragma-directives:enforce-the-policy-3 data-x-internal=enforce-the-policy>enforced</a> upon the current document. <a href=references.html#refsCSP>[CSP]</a></p>

    <p class=note>At the time of inserting the <code id=pragma-directives:the-meta-element-10><a href=#the-meta-element>meta</a></code> element to the document, it is
    possible that some resources have already been fetched. For example, images might be stored in
    the <span>list of available images</span> prior to dynamically inserting a <code id=pragma-directives:the-meta-element-11><a href=#the-meta-element>meta</a></code>
    element with an <code id=pragma-directives:attr-meta-http-equiv-10><a href=#attr-meta-http-equiv>http-equiv</a></code> attribute in the <a href=#attr-meta-http-equiv-content-security-policy id=pragma-directives:attr-meta-http-equiv-content-security-policy-3>Content security policy state</a>.
    Resources that have already been fetched are not guaranteed to be blocked by a <a id=pragma-directives:content-security-policy-4 href=https://w3c.github.io/webappsec-csp/#content-security-policy-object data-x-internal=content-security-policy>Content
    Security Policy</a> that's <a href=https://w3c.github.io/webappsec-csp/#enforced id=pragma-directives:enforce-the-policy-4 data-x-internal=enforce-the-policy>enforced</a> late.</p>

    <div class=example>

     <p>A page might choose to mitigate the risk of cross-site scripting attacks by preventing the
     execution of inline JavaScript, as well as blocking all plugin content, using a policy such
     as the following:

     <pre><code class='html'><c- p>&lt;</c-><c- f>meta</c-> <c- e>http-equiv</c-><c- o>=</c-><c- s>&quot;Content-Security-Policy&quot;</c-> <c- e>content</c-><c- o>=</c-><c- s>&quot;script-src &apos;self&apos;; object-src &apos;none&apos;&quot;</c-><c- p>&gt;</c-></code></pre>

    </div>
   </dl>

  <p>There must not be more than one <code id=pragma-directives:the-meta-element-12><a href=#the-meta-element>meta</a></code> element with any particular state in the
  document at a time.</p>


  <h5 id=charset><span class=secno>4.2.5.4</span> Specifying the document's character encoding<a href=#charset class=self-link></a></h5>

  

  <p>A <dfn id=character-encoding-declaration>character encoding declaration</dfn> is a mechanism by which the <a href=https://encoding.spec.whatwg.org/#encoding id=charset:encoding data-x-internal=encoding>character encoding</a> used to store or transmit a document is specified.</p>

  <p>The Encoding standard requires use of the <span>UTF-8</span> <a href=https://encoding.spec.whatwg.org/#encoding id=charset:encoding-2 data-x-internal=encoding>character
  encoding</a> and requires use of the "<code>utf-8</code>" <a id=charset:encoding-label href=https://encoding.spec.whatwg.org/#label data-x-internal=encoding-label>encoding label</a>
  to identify it. Those requirements necessitate that the document's <a href=#character-encoding-declaration id=charset:character-encoding-declaration>character encoding
  declaration</a>, if it exists, specifies an <a id=charset:encoding-label-2 href=https://encoding.spec.whatwg.org/#label data-x-internal=encoding-label>encoding label</a> using an <a id=charset:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
  case-insensitive</a> match for "<code>utf-8</code>". Regardless of whether a
  <a href=#character-encoding-declaration id=charset:character-encoding-declaration-2>character encoding declaration</a> is present or not, the actual <a href=https://dom.spec.whatwg.org/#concept-document-encoding id="charset:document's-character-encoding" data-x-internal="document's-character-encoding">character encoding</a> used to encode the document must be
  <span>UTF-8</span>. <a href=references.html#refsENCODING>[ENCODING]</a></p>

  

  <p>The following restrictions also apply:</p>

  <ul><li>The character encoding declaration must be serialized without the use of <a href=syntax.html#syntax-charref id=charset:syntax-charref>character references</a> or character escapes of any kind.<li id=charset1024><span id=charset512>The element containing the character encoding
   declaration must be serialized completely within the first 1024 bytes of the
   document.</span></ul>

  <p>In addition, due to a number of restrictions on <code id=charset:the-meta-element><a href=#the-meta-element>meta</a></code> elements, there can only be
  one <code id=charset:the-meta-element-2><a href=#the-meta-element>meta</a></code>-based character encoding declaration per document.</p> 

  <p>If an <a href=https://dom.spec.whatwg.org/#html-document id=charset:html-documents data-x-internal=html-documents>HTML document</a> does not start with a BOM, and its
  <a id=charset:encoding-3 href=https://encoding.spec.whatwg.org/#encoding data-x-internal=encoding>encoding</a> is not explicitly given by <span>Content-Type
  metadata</span>, and the document is not <a id=charset:an-iframe-srcdoc-document href=iframe-embed-object.html#an-iframe-srcdoc-document>an <code>iframe</code> <code>srcdoc</code> document</a>, then the encoding must be specified
  using a <code id=charset:the-meta-element-3><a href=#the-meta-element>meta</a></code> element with a <code id=charset:attr-meta-charset><a href=#attr-meta-charset>charset</a></code> attribute
  or a <code id=charset:the-meta-element-4><a href=#the-meta-element>meta</a></code> element with an <code id=charset:attr-meta-http-equiv><a href=#attr-meta-http-equiv>http-equiv</a></code>
  attribute in the <a href=#attr-meta-http-equiv-content-type id=charset:attr-meta-http-equiv-content-type>Encoding declaration
  state</a>.</p>

  <div class=note>
   <p>A character encoding declaration is required (either in the <span>Content-Type metadata</span> or explicitly in the file) even when all
   characters are in the ASCII range, because a character encoding is needed to process non-ASCII
   characters entered by the user in forms, in URLs generated by scripts, and so forth.</p>

   <p>Using non-UTF-8 encodings can have unexpected results on form submission and URL encodings,
   which use the <a id="charset:document's-character-encoding-2" href=https://dom.spec.whatwg.org/#concept-document-encoding data-x-internal="document's-character-encoding">document's character encoding</a> by default.</p>
  </div>

  <p>If the document is <a id=charset:an-iframe-srcdoc-document-2 href=iframe-embed-object.html#an-iframe-srcdoc-document>an <code>iframe</code> <code>srcdoc</code>
  document</a>, the document must not have a <a href=#character-encoding-declaration id=charset:character-encoding-declaration-3>character encoding declaration</a>. (In
  this case, the source is already decoded, since it is part of the document that contained the
  <code id=charset:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>.)</p>

  <p>In XML, the XML declaration should be used for inline character encoding information, if
  necessary.</p>

  <div class=example>

   <p>In HTML, to declare that the character encoding is <span>UTF-8</span>, the author could
   include the following markup near the top of the document (in the <code id=charset:the-head-element><a href=#the-head-element>head</a></code> element):</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>meta</c-> <c- e>charset</c-><c- o>=</c-><c- s>&quot;utf-8&quot;</c-><c- p>&gt;</c-></code></pre>

   <p>In XML, the XML declaration would be used instead, at the very top of the markup:</p>

   <pre><code class='html'><c- cp>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;</c-></code></pre>

  </div>



  <h4 id=the-style-element><span class=secno>4.2.6</span> The <dfn data-dfn-type=element><code>style</code></dfn> element<a href=#the-style-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style title="The <style> HTML element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the <style> element.">Element/style</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>3.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>3+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-style-element:concept-element-categories>Categories</a>:<dd><a id=the-style-element:metadata-content-2 href=dom.html#metadata-content-2>Metadata content</a>.<dt><a href=dom.html#concept-element-contexts id=the-style-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-style-element:metadata-content-2-2 href=dom.html#metadata-content-2>metadata content</a> is expected.<dd>In a <code id=the-style-element:the-noscript-element><a href=scripting.html#the-noscript-element>noscript</a></code> element that is a child of a <code id=the-style-element:the-head-element><a href=#the-head-element>head</a></code> element.<dt><a href=dom.html#concept-element-content-model id=the-style-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#text-content id=the-style-element:text-content>Text</a> that gives a <a id=the-style-element:conformant-style-sheet href=https://drafts.csswg.org/css-syntax/#conform-classes data-x-internal=conformant-style-sheet>conformant style sheet</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-style-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-style-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-style-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-style-element:attr-style-media><a href=#attr-style-media>media</a></code> —  Applicable media
     <dd><code id=the-style-element:attr-style-blocking><a href=#attr-style-blocking>blocking</a></code> —  Whether the element is <a id=the-style-element:potentially-render-blocking href=urls-and-fetching.html#potentially-render-blocking>potentially render-blocking</a>
     <dd>Also, the <code id=the-style-element:attr-style-title><a href=#attr-style-title>title</a></code> attribute <a href=#attr-style-title id=the-style-element:attr-style-title-2>has special semantics</a> on this element:  <a id=the-style-element:css-style-sheet-set-name href=https://drafts.csswg.org/cssom/#css-style-sheet-set-name data-x-internal=css-style-sheet-set-name>CSS style sheet set name</a>
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-style-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-style>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-style>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-style-element:concept-element-dom>DOM interface</a>:<dd>Uses <code>HTMLStyleElement</code>.</dl>

  <p>The <code id=the-style-element:the-style-element><a href=#the-style-element>style</a></code> element allows authors to embed CSS style sheets in their documents.
  The <code id=the-style-element:the-style-element-2><a href=#the-style-element>style</a></code> element is one of several inputs to the styling processing
  model. The element does not <a href=dom.html#represents id=the-style-element:represents>represent</a> content for the
  user.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLStyleElement/disabled title="The HTMLStyleElement.disabled property can be used to get and set whether the stylesheet is disabled (true) or not (false).">HTMLStyleElement/disabled</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>13+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLStyleElement id=dom-style-disabled data-dfn-type=attribute><code>disabled</code></dfn> getter steps are:</p>

  <ol><li><p>If <a id=the-style-element:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> does not have an <a id=the-style-element:associated-css-style-sheet href=https://drafts.csswg.org/cssom/#associated-css-style-sheet data-x-internal=associated-css-style-sheet>associated CSS style sheet</a>, return
   false.<li><p>If <a id=the-style-element:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-style-element:associated-css-style-sheet-2 href=https://drafts.csswg.org/cssom/#associated-css-style-sheet data-x-internal=associated-css-style-sheet>associated CSS style sheet</a>'s <a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-disabled-flag id=the-style-element:concept-css-style-sheet-disabled-flag data-x-internal=concept-css-style-sheet-disabled-flag>disabled flag</a> is set, return true.<li><p>Return false.</ol>

  <p>The <code id=the-style-element:dom-style-disabled><a href=#dom-style-disabled>disabled</a></code> setter steps are:</p>

  <ol><li><p>If <a id=the-style-element:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> does not have an <a id=the-style-element:associated-css-style-sheet-3 href=https://drafts.csswg.org/cssom/#associated-css-style-sheet data-x-internal=associated-css-style-sheet>associated CSS style sheet</a>,
   return.<li><p>If the given value is true, set <a id=the-style-element:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-style-element:associated-css-style-sheet-4 href=https://drafts.csswg.org/cssom/#associated-css-style-sheet data-x-internal=associated-css-style-sheet>associated CSS style
   sheet</a>'s <a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-disabled-flag id=the-style-element:concept-css-style-sheet-disabled-flag-2 data-x-internal=concept-css-style-sheet-disabled-flag>disabled flag</a>.
   Otherwise, unset <a id=the-style-element:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-style-element:associated-css-style-sheet-5 href=https://drafts.csswg.org/cssom/#associated-css-style-sheet data-x-internal=associated-css-style-sheet>associated CSS style sheet</a>'s <a href=https://drafts.csswg.org/cssom/#concept-css-style-sheet-disabled-flag id=the-style-element:concept-css-style-sheet-disabled-flag-3 data-x-internal=concept-css-style-sheet-disabled-flag>disabled flag</a>.</ol>

  <div class=example>
   <p>Importantly, <code id=the-style-element:dom-style-disabled-2><a href=#dom-style-disabled>disabled</a></code> attribute assignments only take
   effect when the <code id=the-style-element:the-style-element-3><a href=#the-style-element>style</a></code> element has an <a id=the-style-element:associated-css-style-sheet-6 href=https://drafts.csswg.org/cssom/#associated-css-style-sheet data-x-internal=associated-css-style-sheet>associated CSS style sheet</a>:</p>

   <pre><code class='js'><c- a>const</c-> style <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- t>&apos;style&apos;</c-><c- p>);</c->
style<c- p>.</c->disabled <c- o>=</c-> <c- kc>true</c-><c- p>;</c->
style<c- p>.</c->textContent <c- o>=</c-> <c- t>&apos;body { background-color: red; }&apos;</c-><c- p>;</c->
document<c- p>.</c->body<c- p>.</c->append<c- p>(</c->style<c- p>);</c->
console<c- p>.</c->log<c- p>(</c->style<c- p>.</c->disabled<c- p>);</c-> <c- c1>// false</c-></code></pre>
  </div>

  <p>The <dfn data-dfn-for=style id=attr-style-media data-dfn-type=element-attr><code>media</code></dfn> attribute
  says which media the styles apply to. The value must be a <a id=the-style-element:valid-media-query-list href=common-microsyntaxes.html#valid-media-query-list>valid media query list</a>.
  </p>

  

  <p id=style-default-media>The default, if the <code id=the-style-element:attr-style-media-2><a href=#attr-style-media>media</a></code>
  attribute is omitted, is "<code>all</code>", meaning that by default styles apply to all
  media.</p>

  <p>The <dfn data-dfn-for=style id=attr-style-blocking data-dfn-type=element-attr><code>blocking</code></dfn>
  attribute is a <a id=the-style-element:blocking-attribute href=urls-and-fetching.html#blocking-attribute>blocking attribute</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in one engine only." class=less-than-two-engines-flag>⚠</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets title="Specifying alternative style sheets in a web page provides a way for users to see multiple versions of a page, based on their needs or preferences.">Alternative_style_sheets</a><p class=less-than-two-engines-text>Support in one engine only.<div class=support><span class="firefox yes"><span>Firefox</span><span>3+</span></span><span class="safari unknown"><span>Safari</span><span>?</span></span><span class="chrome no"><span>Chrome</span><span>1–48</span></span><hr><span class="opera yes"><span>Opera</span><span>Yes</span></span><span class="edge_blink no"><span>Edge</span><span>No</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p id=title-on-style>The <dfn data-dfn-for=style id=attr-style-title data-dfn-type=element-attr><code>title</code></dfn> attribute on <code id=the-style-element:the-style-element-4><a href=#the-style-element>style</a></code> elements defines
  <a href=https://drafts.csswg.org/cssom/#css-style-sheet-set id=the-style-element:css-style-sheet-set data-x-internal=css-style-sheet-set>CSS style sheet sets</a>. If the <code id=the-style-element:the-style-element-5><a href=#the-style-element>style</a></code> element
  has no <code id=the-style-element:attr-style-title-3><a href=#attr-style-title>title</a></code> attribute, then it has no title; the <code id=the-style-element:attr-title><a href=dom.html#attr-title>title</a></code> attribute of ancestors does not apply to the <code id=the-style-element:the-style-element-6><a href=#the-style-element>style</a></code>
  element. If the <code id=the-style-element:the-style-element-7><a href=#the-style-element>style</a></code> element is not <a id=the-style-element:in-a-document-tree href=https://dom.spec.whatwg.org/#in-a-document-tree data-x-internal=in-a-document-tree>in a document tree</a>, then the <code id=the-style-element:attr-style-title-4><a href=#attr-style-title>title</a></code> attribute is ignored. <a href=references.html#refsCSSOM>[CSSOM]</a></p>

  <p class=note>The <code id=the-style-element:attr-style-title-5><a href=#attr-style-title>title</a></code> attribute on <code id=the-style-element:the-style-element-8><a href=#the-style-element>style</a></code>
  elements, like the <code id=the-style-element:attr-link-title><a href=#attr-link-title>title</a></code> attribute on <code id=the-style-element:the-link-element><a href=#the-link-element>link</a></code>
  elements, differs from the global <code id=the-style-element:attr-title-2><a href=dom.html#attr-title>title</a></code> attribute in that a
  <code id=the-style-element:the-style-element-9><a href=#the-style-element>style</a></code> block without a title does not inherit the title of the parent element: it
  merely has no title.</p>

  <p>The <a id=the-style-element:child-text-content href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a> of a <code id=the-style-element:the-style-element-10><a href=#the-style-element>style</a></code> element must be that of a
  <a id=the-style-element:conformant-style-sheet-2 href=https://drafts.csswg.org/css-syntax/#conform-classes data-x-internal=conformant-style-sheet>conformant style sheet</a>.</p>

  <p>A <code id=the-style-element:the-style-element-11><a href=#the-style-element>style</a></code> element is <a id=the-style-element:implicitly-potentially-render-blocking href=urls-and-fetching.html#implicitly-potentially-render-blocking>implicitly potentially render-blocking</a> if the
  element was created by its <a id=the-style-element:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s parser.</p>

  <hr>

  

  <p class=note>This specification does not specify a style system, but CSS is expected to be
  supported by most web browsers. <a href=references.html#refsCSS>[CSS]</a></p>

  <p>The <code id=the-style-element:linkstyle><a data-x-internal=linkstyle href=https://drafts.csswg.org/cssom/#the-linkstyle-interface>LinkStyle</a></code> interface is also implemented by this element. <a href=references.html#refsCSSOM>[CSSOM]</a></p>

  <div class=example>

   <p>The following document has its stress emphasis styled as bright red text rather than italics
   text, while leaving titles of works and Latin words in their default italics. It shows how using
   appropriate elements enables easier restyling of documents.</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE html&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en-US&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->My favorite book<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>style</c-><c- p>&gt;</c->
   <c- f>body</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- kc>black</c-><c- p>;</c-> <c- k>background</c-><c- p>:</c-> <c- kc>white</c-><c- p>;</c-> <c- p>}</c->
   <c- f>em</c-> <c- p>{</c-> <c- k>font-style</c-><c- p>:</c-> <c- kc>normal</c-><c- p>;</c-> <c- k>color</c-><c- p>:</c-> <c- kc>red</c-><c- p>;</c-> <c- p>}</c->
  <c- p>&lt;/</c-><c- f>style</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>head</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->My <c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->favorite<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c-> book of all time has <c- p>&lt;</c-><c- f>em</c-><c- p>&gt;</c->got<c- p>&lt;/</c-><c- f>em</c-><c- p>&gt;</c-> to be
  <c- p>&lt;</c-><c- f>cite</c-><c- p>&gt;</c->A Cat&apos;s Life<c- p>&lt;/</c-><c- f>cite</c-><c- p>&gt;</c->. It is a book by P. Rahmel that talks
  about the <c- p>&lt;</c-><c- f>i</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;la&quot;</c-><c- p>&gt;</c->Felis catus<c- p>&lt;/</c-><c- f>i</c-><c- p>&gt;</c-> in modern human society.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>body</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

  </div>



  




  <nav><a href=dom.html>← 3 Semantics, structure, and APIs of HTML documents</a> — <a href=./>Table of Contents</a> — <a href=sections.html>4.3 Sections →</a></nav>
